Related learning recommendations: WeChat public account development tutorial

In 2019 AD, the typesetting ability of WeChat public accounts was weak. It has always been criticized by operators, and tools such as Xiumi and 135 Editor are divided into one party.

But whether it is WeChat’s native tools or other editors, creators have to spread their limited creative experience to layout design.

Markdown The panacea to solve the problem of typesetting came into being.

1. Introduction

1.1 What is Markdown?

Markdown is a typesetting syntax with a minimalist input method and extremely low learning cost.

It is rich in titles, quotes, bold, links, pictures, code snippets, formulas and other formats needed for text creation.

Having it allows people to focus on the content itself without being disturbed by the format.

1.2 How to integrate with WeChat public account?

Such excellent formatting syntax is not supported by the WeChat public account.

Don’t worry! Markdown Nice is here to help you solve your problem!

1.3 What is Markdown Nice?

An open source Markdown editor, the typesetting is successful after writing, and you can copy and paste it to the WeChat official account.

So what? Is that all?

of course not! Nice baby, what other characteristics do you have?

##Supports figure beds, footnotes, codes, formulas
• Supports 8 types of layout themes and 7 types Code theme
• supports custom styles, and themes can be submitted for people to admire
• In addition to official accounts, it also supports platforms such as Zhihu, Nuggets, Blog Park and CSDN
• My appearance is good

With so many excellent characteristics in front of you, what are you waiting for?

Address:

https://mdnice.com

Make your WeChat layout Nice!

2. Text

I didn’t expect you are still reading

Ahem,,,

Don’t underestimate it Nice baby, in order to be able to use Markdown for typesetting public accounts, I struggled with the WeChat public account editor for half a year before I achieved the current results!

Want to hear how I fight? Let me tell you what I have to say!

2.1 Battle Prologue

The WeChat public account editor originates from the open source ueditor project of the Baidu FEX front-end team. This was discovered by me by stealing the web page code, as shown in the picture:

Because ueditor is a rich text editor, what I am about to face is the conversion battle of

markdown->rich text, There are quite a few excellent implementations of this conversion battle in the open source or software world. For example:

Web side: editor.md, mavonEditor
• PC side: typora, MWeb

However, there is a problem with the above tools. It integrates

CSS styles into rich text, and then adapts to the WeChat editor and even the rich text editors of other major domestic platforms.

So are there any tools that try to remedy this problem? In fact, there are:

Web side: md2all, wechat-format
• Browser plug-in: markdown-here

But the above tools Each one has its imperfections, so I found this opportunity and gave birth to my own Nice baby to solve all imperfections!

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

• React: facebook’s open source js view layer framework
• markdown-it: markdown conversion rich text parser
• juice: Tool for converting CSS class selectors into inline styles
• codemirror: web code editor
• ant-design: React UI component library
• mobx: state management library
• highlight.js: code highlighting Library
• MathJax-node: formula to image library
• axios, ali-oss, qiniu-js, etc.

Note: Some of the above open source will be mentioned below Library, please refer to here for the specific functions of the open source library.

After possessing the above-mentioned technologies, I declared war on the WeChat editor and fired the first shot of the battle!

2.2 The first shot in the battle: code theme

WeChat public accounts did not support code blocks at all before 2018 , the current support is also very single, and there is a problem of large code fonts.

It’s very annoying to say that the developers of the WeChat public account editor have never thought about how important code blocks are to the programmer community? ?

For this reason, I found the highlight.js code highlighting artifact to help solve the problem of a single code theme. question.

After certain screening, a total of 7 code styles including atom-one-dark, atom-one-light, monikai, GitHub, vs2015, xcode and WeChat code themes were selected for everyone to choose from.

The WeChat code theme does not belong to the category of highlight.js, so its structure needs to be obtained from the WeChat public account editor source code. The following two pictures show how to obtain it:

##And

highlight.js and markdown-it parsers are used in conjunction, so there are two markdown parsers in the tool, which are used to parse WeChat code themes and other code themes respectively. Source code reference.

In addition to the above problems, many technical public account codes will have:

Multiple line display problems caused by too long a line of code.

This problem can be solved using the following CSS code:

pre?code?{display:?-webkit-box?!important}復(fù)制代碼

The comparison effect is as shown in the figure:

# #Comrades who use Markdown Nice from now on, the code will be more beautiful!

2.3 The second shot of the battle: Picture upload

How can a good article be without pictures?

(Some technical staff said: I don’t have one)

Picture management is the key to every mature editor problems that will be encountered.

Nice Baby first used the SM.MS image bed, which is operated and maintained by a big boss. Thank you very much!

Although you can upload pictures using this picture bed, when pasting them into the WeChat editor, the failure rate is extremely high (

I want to trample the WeChat editor to death

), as shown in the picture:

It’s so {hē hē hē hē}!

In order to solve the above problems, Markdown Nice has successively supported customized Alibaba Cloud and Qiniu Cloud image beds. You can use self-built image beds by purchasing the services of Alibaba Cloud and Qiniu Cloud.

but! Let users configure it themselves. Although there are configuration documents, the entire configuration process is extremely complicated and miserable!

So, Nice Baby used his own account to build his own drawing bed, set the storage time to one day, and provided temporary layout for use. mdnice picture bed. At this point, the image upload support in the tool is as follows:

##mdniceFree1 dayLowSM.MSFree Long-termHighAlibaba CloudReferenceCustomLowQiniu Cloud10G FreeCustomLow##

這場(chǎng)圖床的戰(zhàn)役中，最大的難度在于需要閱讀阿里云 OSS 和七牛云 KODO 的文檔，并且使用其開(kāi)源出來(lái)的工具包 ali-oss 和 qiniu-js 。

這其中又涉及到了 FormData、file對(duì)象、base64 和 blob 之間的神奇轉(zhuǎn)換，源碼參考。

總之，這場(chǎng)戰(zhàn)斗打的不亦樂(lè)乎。

2.4 戰(zhàn)斗第三槍：數(shù)學(xué)公式

微信公眾號(hào)排版中，數(shù)學(xué)公式是一個(gè)噩夢(mèng)！

因?yàn)槲⑿啪庉嬈髯隽艘韵氯虑椋?/p>

• 不支持公式編輯
• 不支持 html 和 css 生成的公式，因?yàn)樽煮w無(wú)法導(dǎo)入
• 不支持 svg，放入后提示失敗

這三件事情簡(jiǎn)直像魔鬼的步伐，把公式需求者放在光滑的地板上摩擦、摩擦....

目前唯一可行的方案就是將公式轉(zhuǎn)換成圖片，再將圖片直接貼到公眾號(hào)里，Nice寶寶覺(jué)得自己這個(gè)想法簡(jiǎn)直是完美！

但是，怎么做呢......

忽然靈機(jī)一動(dòng)，想到了朋友曾經(jīng)推薦的一個(gè)轉(zhuǎn)換公式網(wǎng)站 Tricky WeChat public account editor，這個(gè)網(wǎng)站能夠做到將任意公式轉(zhuǎn)換成png圖片并給出可訪問(wèn)鏈接。

但是由于圖片穩(wěn)定性，無(wú)法直接使用該鏈接，會(huì)存在和第二場(chǎng)戰(zhàn)役一樣，圖片粘貼失敗的情況，讓人苦不堪言。

• 這個(gè)問(wèn)題該怎么解決呢？如果能夠自建公式轉(zhuǎn)png圖片服務(wù)就好了。
• 有沒(méi)有這樣的開(kāi)源庫(kù)？有！MathJax-node 就可以！

于是Nice寶寶自建后臺(tái)服務(wù)，封裝 RESTful 接口供前端調(diào)用，實(shí)現(xiàn)了公式轉(zhuǎn)圖片的功能！經(jīng)過(guò)測(cè)試，完全可以使用，粘貼后再根據(jù)排版情況調(diào)整圖片大小即可。

其中對(duì)于大量公式的轉(zhuǎn)換，前端合理使用了異步請(qǐng)求，并非一個(gè)個(gè)轉(zhuǎn)換而是并行執(zhí)行，性能上達(dá)到了10個(gè)公式也能2秒轉(zhuǎn)換完畢的效果，完全可用于公式排版。

2.5 戰(zhàn)斗第四槍：微信外鏈轉(zhuǎn)腳注

眾所周知（不知道也得知道），微信不支持外鏈，除了域名為https://mp.weixin.qq.com/的合法鏈接外，其他的鏈接出現(xiàn)后都會(huì)被自動(dòng)刪除。

而添加外鏈的唯一官方方式就是在閱讀全文處，當(dāng)然，直接將鏈接本身放到文中或者制作二維碼圖片也是可以的選擇。

而 Nice 寶寶則提供了將微信外鏈轉(zhuǎn)為腳注的方式解決該問(wèn)題，是不是很優(yōu)雅呢？

其中鏈接和腳注的使用區(qū)別如下：

鏈接：[文字](鏈接?"文字")
腳注：[文字](腳注解釋?"腳注名字")復(fù)制代碼

這里又涉及到了一個(gè)常見(jiàn)的問(wèn)題，就是很多公眾號(hào)作者的文章中，原來(lái)在其他平臺(tái)發(fā)布時(shí)都是鏈接，而到這里排版時(shí)需要進(jìn)行挨個(gè)修改，實(shí)在是讓人頭大。

于是Nice寶寶我又做了一個(gè)小改進(jìn)，就是在粘貼文章的時(shí)候會(huì)自動(dòng)監(jiān)測(cè)是否存在外鏈，并提示作者是否一鍵轉(zhuǎn)成腳注，這樣就不必手工修改了，贊不贊！

2.6 戰(zhàn)役總結(jié)

和微信公眾號(hào)編輯器對(duì)抗，是個(gè)極其有意思的過(guò)程。除了上述提到的問(wèn)題之外，還有很多的細(xì)節(jié)點(diǎn)需要注意，在此就不一一討論了，感興趣歡迎閱讀源碼。

Markdown Nice’s battle journey is far from over, and functions such as official website production, browser plug-ins, local tools, and typesetting correction are ready to go.

3. Discussion points that have nothing to do with combat

3.1 Design concept

For most people, content is more important than layout, and layout is more important than design .

Content is the core of attracting readers, so it is the most important.

As for the comparison between typesetting and design, as a former WeChat art editor, with the increase in typesetting experience, I found that the effect of the article does not lie in the extra lace and embellishment.

Neatness, comfort and simplicity are the last words!

3.2 Content, layout and design

Design= Typesetting creativity

---

Because: most people don’t get creative ideas, or think that the cost of creativity is too high.

So: Most people don’t do design, and rich text design is not suitable for simple content editors.

---

Although: most people don’t know how to typeset, or think that the cost of typesetting is too high.

But: Markdown Nice releases users from layout and only focuses on the content itself.

3.3 About open source

Open source is a process that is both simple and difficult:

• Simple because: notes, books All valuable things from orders, tools, and platforms can be output in GitHub. It is very simple to do.
• It is difficult because: strive to be valuable to others and always insist on output. It is very difficult to do

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 if you do it well can it create value for others.

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

1. You must have an idea and verify its feasibility and necessity. Compare with similar products and be aware of it
2. Seize the pain points, grasp the core values, think from the user's perspective, and listen to more feedback
3. Spiral upward, continue to iterate, and produce high-quality products
4. The most important point is, To make a product you not only need to write code, but also promote it! ! The aroma of wine is also afraid of the deep alley! !

Participating in open source is not easy along the way. I hope you will cherish it.

Finally, thank you to every open source participant. More people are welcome to participate in open source. There is still a lot of code waiting for someone to write!

##『Explaining Open Source Project Series』——Let people who are interested in open source projects no longer be afraid, Let the initiators of open source projects no longer be alone. Follow our articles and you will discover the joy of programming, use and discover how easy it is to participate in open source projects. Welcome to leave a message to contact us and join us, so that more people can fall in love with and contribute to open source ~

Related learning recommendations:

WeChat Mini Program Tutorial

Picture bed	Fee	Validity period	Failure rate

The above is the detailed content of Tricky WeChat public account editor. For more information, please follow other related articles on the PHP Chinese website!