Author: the soul painter pastoral code

The Markdown Nice experience mentioned in this article is located at mdnice.com

In 2019, the typesetting ability of wechat public account is weak, which has always been criticized by the operators. Xiumi, 135 editor and other tools are divided.

However, whether it is wechat native tools or other editors, creators have to spread their limited creative experience to typesetting design.

Markdown’s solution to typography was born.

One, the introduction

1.1 What is Markdown?

Markdown is a typographical grammar with minimal input and a very low cost of learning.

It contains titles, references, boldface, links, images, code fragments, formulas, and everything else you need to create text.

Having it allows you to focus on the content and not be distracted by the format.

1.2 How to combine with wechat public account?

Such excellent typesetting grammar, but wechat public account does not support it.

Don’t worry! Markdown Nice to help you out!

1.3 What is Markdown Nice?

An open source Markdown editor, after writing the typesetting is successful, copy and paste to the wechat public number.

So what? Is that all?

Of course not! Nice baby, what else do you have?

  • Support graph bed, footnote, code, formula
  • Supports 8 typesetting themes and 7 code themes
  • Support custom style, can submit the theme for viewing
  • In addition to the public special, also support zhihu, Nuggets, blog park and CSDN and other platforms
  • I have good looks

With so many great features in front of you, what are you waiting for?

Address: https://mdnice.com

Let your wechat layout Nice up!

Second, the body

I didn’t know you were still watching

Cough, cough,

Don’t look down on Nice baby me. In order to use Markdown for the typesetting of the official account, I fought with the wechat official account editor for half a year, and won the battle now!

Want to hear how I fight? Now listen to me!

2.1 Battle prologue

Wechat official account editor originates from the open source UEditor project of Baidu FEX front end team. This is what baby I found when I hacked the web code, as shown in the picture:

Because UEditor is a rich text editor, I’m going to be facing the markDown -> rich text transformation campaign, which has been implemented quite nicely in the open source or software world. Such as:

  • Web: editor.md, mavonEditor
  • PC: Typora and MWeb

However, there is a problem with the above tools, which do not integrate CSS style into rich text well, and then adapt to wechat editor, so that the rich text editor of other major platforms in China.

Are there tools to try and remedy this? There is:

  • Web: MD2ALL, wechat format
  • Browser plug-in: Markdown-here

However, each of these tools has its own imperfections, so I saw the opportunity to produce Nice baby to solve all the imperfections!

Markdown Nice is an open source project that combines many open source technologies, including:

  • React: Facebook’s open source JS view layer framework
  • Markdown-it: MarkDown transforms rich text parser
  • Juice: A tool for converting CSS class selectors to inline styles
  • Codemirror: Web code editor
  • Ant-design: React UI component library
  • Mobx: state management library
  • Highlight.js: code highlighter library
  • Mathjax-node: Formula transfer library
  • Axios, Ali-oss, Qiniu-JS, etc

Note: some of the above open source libraries will be mentioned below. Please refer to the specific role of open source libraries here.

With the above technology at my side, I declared war on the wechat editor and fired the first shot in the battle!

2.2 Battle First Shot: Code theme

Wechat public account before 2018, is completely not support the code block, the current support is also very single, and there is a large code font problem.

Say very angry, the developers of wechat public account editor, did not think how important the code block is to the programmer community??

To that end, I turned to highlight.js to help solve the problem of a single code theme.

After a certain selection, seven code styles, atom-one-dark, Atom-one-light, Monikai, GitHub, VS2015, XCode and wechat code theme, were selected for you to choose.

Since the wechat code theme does not belong to the category of highhigh.js, its structure needs to be obtained from the source code of the wechat official account editor. The following two figures show how to get it:

While highlighte. js is used in conjunction with markdown-it parser, so there are two MarkDown parsers in the tool, which are respectively used to parse wechat code topics and other code topics, source reference.

In addition to the above problems, many technical public number code will exist: one line of code is too long to cause multiple lines of display problems.

This problem can be solved using the following CSS code:

pre code {
display: -webkit-box ! important
}
Copy the code

The contrast effect is shown in the figure:

From now on, the code that uses Markdown Nice is more beautiful!

2.3 Battle second shot: Picture upload

How can a good article have no pictures?

(Some technicians say: mine does not)

Image management is a problem that every mature editor will encounter.

Nice Treasure first use SM.MS picture bed, the picture bed is operated by a big guy, thank you very much!

Although the picture bed can upload pictures, it has a high failure rate when pasting pictures to the wechat editor (you want to step on the wechat editor), as shown in the figure below:

Is really fo | {h ē h ē h ē h ē}!

In order to solve the above problems, Markdown Nice has supported the custom Aliyun and Qiniuyun picture beds, and the self-built picture beds are used by purchasing aliyun and Qiniuyun services.

But! Let the user configure, although there is a configuration document, but the whole configuration process is extremely complex, it is simply brutal!

So, Nice baby used its own account, built its own map bed, set the saving time for one day, and provided mdNICE map bed for temporary typesetting. So far, the picture upload support in the tool is as follows:

Figure bed cost The period of validity Failure rate
mdnice free 1 day low
SM.MS free For a long time high
Ali cloud reference The custom low
Seven NiuYun 10 g free The custom low

In the battle of this map bed, the biggest difficulty lies in the need to read ali Cloud OSS and Seven Niu Cloud KODO documents, and use its open source toolkit Ali-OSS and Qiniu-JS.

This involves the magic conversion between FormData, file objects, Base64, and blob, source reference.

All in all, it was a good fight.

2.4 Battle third shot: mathematical formula

Wechat public account layout, mathematical formula is a nightmare!

Because the wechat editor does three things:

  • Formula editing is not supported
  • HTML and CSS generated formulas are not supported because fonts cannot be imported
  • SVG is not supported, and a failure message is displayed after insertion

These three things are just like the devil’s pace, putting formula demander on the smooth floor to rub, rub….

The only solution is to convert the formula into pictures and post them directly to the official account, which Nice baby thinks is perfect.

But, how to do……

Suddenly, I had an idea of codecogs, a formula conversion website recommended by a friend. This website can convert any formula into A PNG image and give an accessible link.

However, due to the stability of the picture, the link can not be used directly, and there will be as in the second battle, the failure of the picture paste, let people suffer.

  • How can this problem be solved? It would be nice if we could build our own formula to PNG service.
  • Is there an open source library? There are! Mathjax-node does!

So Nice baby built its own background service, encapsulated RESTful interface for the front end to call, to achieve the function of formula to picture! After testing, it can be used completely. After pasting, adjust the size of the picture according to the situation of typesetting.

For the conversion of a large number of formulas, the front-end uses asynchronous request reasonably, not one by one but in parallel, the performance reaches the effect that even 10 formulas can be converted in 2 seconds, which can be fully used for formula typesetting.

2.5 Battle the fourth gun: wechat outside the chain footnote

As we all know (don’t know also need to know), WeChat does not support outside the chain, in addition to the domain name as https://mp.weixin.qq.com/ lawful link, after other links will be automatically deleted.

The only official way to add the chain is to read the full text, of course, directly put the link itself in the text or make a TWO-DIMENSIONAL code picture is also an option.

And Nice baby provides a way to solve this problem by turning the wechat chain into a footnote, isn’t it very elegant?

The differences between links and footnotes are as follows:

Link:The text] (Link "text") Footnote: [The text] (Footnote explanation "Footnote name")
Copy the code

Here involves a common problem, is a lot of public number author’s article, the original in other platforms are links, and here when typesetting need to be modified in turn, it is very big.

So I made another small improvement for Nice Baby, that is, when pasting an article, it will automatically monitor whether there is an external chain, and prompt the author whether to turn it into a footnote with one key, so that there is no need to modify it manually, like or not!

2.6 Campaign Summary

And wechat public account editor against, is a very interesting process. In addition to the above mentioned problems, there are a lot of details to pay attention to, here is not a discussion, interested welcome to read the source code.

The battle for Markdown Nice is far from over, with features like website creation, browser plugins, native tools, and typographical corrections on the way.

Three, talk about something unrelated to the fight

3.1 Design Concept

For most people, content trumps typography, and typography trumps design.

Content is the core of engaging the reader, so it matters most.

As a former wechat art editor, with more experience in typesetting, I found that the effect of an article does not lie in extra lace and embellishment.

Neat, comfortable, simple is the hard truth!

3.2 Content, layout and design

Design = Layout + creativity

Because: Most people don’t get ideas, or think they cost too much.

So: Most people don’t design, and rich text design isn’t suitable for mere content editors.

Although: most people do not typeset, or think that typesetting costs too much.

But: Markdown Nice frees the user from typography and focuses only on the content itself.

3.3 About Open Source

Open source is both a simple and difficult process:

  • Simple because notes, booklists, tools, platforms, everything of value can be exported on GitHub, and it’s easy to do
  • It’s hard because it’s hard to strive to be valuable to others, to consistently deliver

As described above, doing open source is actually making a product, which may be a technical product (such as Redis, Ant Design) or a business product (such as Markdown Nice). Only when it is done well can it be of value to others.

The process of making a product is long and winding. Compared to the Markdown Nice development process, you can see the following steps:

  1. To have an idea, and verify its feasibility and necessity, to compare with similar products, do know
  2. Grasp the pain point, grasp the core value, stand in the user’s point of view, listen to the feedback
  3. Spiral upward, continuous iteration, output quality
  4. Most importantly, making a product is not just about writing code, it’s also about advertising! Wine is afraid of deep alley!!

Participate in open source, along the way, very difficult, hope you cherish.

Finally, thanks to everyone involved in open source, welcome more people to participate in open source, there is still a lot of code waiting for someone to write!

“Explain the Open Source Project series” – let people interested in open source projects no longer fear, let the initiator of open source projects no longer alone. Follow our article and you’ll see how easy it is to program, use, and participate in open source projects. Welcome to contact us, join us, let more people love open source, contribute to open source ~