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 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 PrologueThe 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}复制代码
Copy after login
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:
Picture bed
Fee
Validity period
Failure rate
##mdnice
Free
1 day
Low
SM.MS
Free
Long-term
High
Alibaba Cloud
Reference
Custom
Low
Qiniu Cloud
10G Free
Custom
Low
##
这场图床的战役中，最大的难度在于需要阅读阿里云 OSS 和七牛云 KODO 的文档，并且使用其开源出来的工具包 ali-oss 和 qiniu-js 。
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:
You must have an idea and verify its feasibility and necessity. Compare with similar products and be aware of it
Seize the pain points, grasp the core values, think from the user's perspective, and listen to more feedback
Spiral upward, continue to iterate, and produce high-quality products
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
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!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
