This is a copied article.

WeChat Official Account Typesetting Tool. For questions or suggestions, please leave a message on the Official Account. Programmer Turnaround

It is recommended to use Chrome browser for the best experience.

There is a very annoying problem with using the WeChat Official Account editor: the pasted code is formatted incorrectly, takes up little space, and has line numbers, and it looks very ugly. The Markdown.com.cn editor can solve this problem.

Markdown is a lightweight "markup language".

Please read the text below to familiarize yourself with the usage of the tool. This article can be directly copied and previewed in WeChat.

1 Introduction to Markdown.com.cn#

Markdown editor with support for custom styles
Supports WeChat Official Account, Zhihu, and SegmentFault
Click on the corresponding icon in the upper right corner to copy to various platforms with one click

2 Markdown Syntax Tutorial#

2.1 Headings#

Different numbers of # can create different headings, as follows:

Heading 1#

Heading 2#

Heading 3#

2.2 Fonts#

To create bold, italics, bold and italics, and strikethrough text, different symbols need to be added before and after the text. For example:

This is bold text

This is italic text

This is bold and italic text

~Here is strikethrough text~

Note: If you want to change the color, font, or center alignment of the text, you need to use inline HTML.

2.3 Unordered Lists#

To create an unordered list, use the - symbol followed by a space. For example:

Unordered list 1
Unordered list 2
Unordered list 3

If you want to control the indentation of the list, you need to use a space before the - symbol. For example:

Unordered list 1
Unordered list 2
- Unordered list 2.1
- Unordered list 2.2

Due to limitations in WeChat, only up to two levels of lists are supported.

2.4 Ordered Lists#

To create an ordered list, use a number followed by a period and a space, and then enter the content. For example:

Ordered list 1
Ordered list 2
Ordered list 3

2.5 Blockquotes#

To create a blockquote, use the > symbol followed by the text. For example:

Reading a good book is like having a conversation with a noble person. - Goethe

The employment system is not beneficial to workers, but workers are unable to escape from this system. - Ruanyifeng

2.7 Links#

WeChat Official Account only supports links to articles within the Official Account, which means links with the domain https://mp.weixin.qq.com/. The usage is as follows:

For this argument, readers are welcome to refer to the previously published article, Are You a "Survivor of the Future World"?

2.8 Images#

To insert an image, use the following format:

Image description

Supported image formats include jpg, png, gif, svg, etc. Note that svg files can only be used in the WeChat Official Account platform. An example of an svg file is as follows:

Supports dragging and pasting screenshots into the editor.

Note: Only supports dragging and pasting images into the editor, and only supports images with the https protocol. When pasting images into WeChat, they will be automatically uploaded to the WeChat server.

2.9 Horizontal Rules#

To create a horizontal rule, use three or more hyphens in a single line, and leave a blank line above the horizontal rule. For example:

2.10 Tables#

To create a table, use colons to define the alignment of the table, as follows:

Name	Age	Job
Cutie	18	Eat Cutie
Little Brave	20	Climb a Brave Tree
Little Clever	22	Read a Clever Book

3 Special Syntax#

3.1 Footnotes#

Supported platforms: WeChat Official Account, Zhihu.

The difference between footnotes and links is as follows:

Link: [Text](Link)
Footnote: [Text](Footnote Explanation "Footnote Name")

Some people believe that in the context of the "Front-end Web Development" era, mobile development (Android, iOS) will gradually exit the stage of history.

[Full Stack Engineer](refers to a person who masters multiple skills and can independently complete products using these skills. "What is a Full Stack Engineer") plays a crucial role in the business development process.

Please scroll to the bottom to view the footnote content.

3.2 Code Blocks#

Supported platforms: WeChat Official Account for WeChat code theme only! No restrictions for other themes.

To quote code within a line, simply enclose it in backticks. For example:

Use the printf() function.

To highlight a code block, use three backticks before and after the code block, and specify the language used for the code block after the first set of backticks. For example:

// FileName: HelloWorld.java
public class HelloWorld {
  // Java entry program, the program starts here
  public static void main(String[] args) {
    System.out.println("Hello,World!"); // Print a statement to the console
  }
}

The following languages are supported:

bash
clojure, cpp, cs, css
dart, dockerfile, diff
erlang
go, gradle, groovy
haskell
java, javascript, json, julia
kotlin
lisp, lua
makefile, markdown, matlab
objectivec
perl, php, python
r, ruby, rust
scala, shell, sql, swift
tex, typescript
verilog, vhdl
xml
yaml

If you want to change the code highlighting style, you can choose from the Code Theme options.

The WeChat code theme is consistent with the official WeChat theme, and has the following considerations:

Line numbers are included and do not wrap, and the code size is the same as the official theme
The language used for the code block needs to be specified, otherwise it will not be highlighted
After pasting into the Official Account, click inside and outside the code block with the mouse to complete the highlighting

Diff cannot be displayed simultaneously with the highlighting of other languages, and you need to adjust the code theme to a theme other than the WeChat code theme to see the diff effect. The usage is as follows:

+ Added item
- Deleted item

Other themes do not include line numbers, and you can customize whether to wrap the code. The code size is the same as the current editor.

3.3 Mathematical Formulas#

Supported platforms: WeChat Official Account, Zhihu.

To use inline formulas, such as this chemical formula: $\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$

To use block formulas, use the following format:

$H(D_2) = -\left(\frac{2}{4}\log_2 \frac{2}{4} + \frac{2}{4}\log_2 \frac{2}{4}\right) = 1$

Matrices:

\begin{pmatrix} 1 & a_1 & a_1^2 & \cdots & a_1^n \\ 1 & a_2 & a_2^2 & \cdots & a_2^n \\ \vdots & \vdots & \vdots & \ddots & \vdots \\ 1 & a_m & a_m^2 & \cdots & a_m^n \\ \end{pmatrix}

Due to WeChat's lack of support, the current solution is to convert it to svg and place it in WeChat without any adjustments, so that the vector is not distorted.

Currently, if there are too many formulas, there may be no response after pasting in Chrome, but it always works in Firefox.

3.4 TOC#

Supported platforms: WeChat Official Account, Zhihu.

TOC stands for Table of Contents, which lists all the headings.

[TOC]

Due to WeChat's support for only two levels of lists, this tool only supports the display of second-level and third-level headings.

3.5 Phonetic Symbols#

Supported platforms: WeChat Official Account.

Supports phonetic symbols, usage is as follows:

Markdown Nice is so easy to use, it's simply {hē hē hē hē|hē hē hē hē}!

3.6 Horizontal Slide Show#

Supported platforms: WeChat Official Account.

Set up a horizontal slide show using the <![](url),![](url)> syntax. The specific usage is as follows:

< Blue 1 , Green 2 , Red 3 >

4 Other Syntax#

4.1 HTML#

Supports native HTML syntax, please write inline styles, as follows:

Orange aligned to the right
Orange aligned to the center

4.2 UML#

Not supported, it is recommended to use the open source tool https://draw.io/ to create UML diagrams and then import them as images.

5 Acknowledgements#

Lyric Manager wechat-format
Yan Jia Dashao MD2All