Hexo Blog Article | study / blog

:heart::no_mouth::heart: Direct link to the emoji collection

This article is a ported and simplified adaptation of Markdown.com.cn

1 Introduction to Markdown.com.cn

A Markdown editor that supports custom styles
Supports WeChat Official Accounts, Zhihu, and Juejin
Click the corresponding icon at the top right to copy to each platform with one click

2 Markdown Syntax Tutorial

For details, please click Direct link to the article editing tutorial

2.5 Blockquotes

To create a blockquote, write the text after the > symbol, as follows:

> Reading a good book is like conversing with noble people. —Goethe

Reading a good book is like conversing with noble people. —Goethe

The employment system is unfavorable to workers, but workers are fundamentally powerless to escape it. —Ruan Yifeng

2.7 Links

WeChat Official Accounts only support links to official account articles, i.e., valid links whose domain is https://mp.weixin.qq.com/.

2.8 Images

To insert an image, use the following format:

![write image description here](image link) ![](https://markdown.com.cn/images/i-am-svg.svg)

Supports image formats such as jpg, png, gif, svg, etc. Among them, svg files can only be used on the WeChat Official Accounts platform, an example of an svg file is as follows:

Supports dragging images and pasting screenshots into the editor.

Note: Supports dragging images and pasting screenshots into the editor. Only https images are supported; when pasted into WeChat, the images will be automatically uploaded to the WeChat server.

2.9 Dividers

You can create a divider by using three or more hyphens on a single line, and you also need a blank line above the divider. As follows:

---

2.10 Tables

You can use colons to define the alignment of a table, as follows:

Example: | Name | Age | Job || :--- | :-: | ---: || Little Cutie | 18 | Eating Cornetto || Little Brave | 20 | Climbing a brave tree || Little Clever | 22 | Reading a clever book |

Name	Age	Job
Little Cutie	18	Eating Cornetto
Little Brave	20	Climbing a brave tree
Little Clever	22	Reading a clever book

3. Special Syntax

3.1 Footnotes

Supported platforms: WeChat Official Accounts, Zhihu.

The difference between a footnote and a link is shown below:

Link: [text](link)
Footnote: [text](footnote explanation "footnote name")

3.2 Code Blocks

Supported platforms: The WeChat code theme only supports WeChat Official Accounts! Other themes have no restrictions.

If you need to quote code inline, just wrap it in backticks, as follows:

Use the printf() function.

Use three backticks on the line before and after the code block to be highlighted, and the text after the backticks on the first line indicates the language used in the code block, as follows:

// FileName: HelloWorld.java
public class HelloWorld {
  // Java entry program, the program starts from here
  public static void main(String[] args) {
    System.out.println("Hello,World!"); // Prints 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 pick from the Code Theme above.

Among them, the WeChat code theme is consistent with WeChat’s official theme, and there are the following notes:

Includes line numbers and does not wrap; the code size is consistent with the official one - Includes line numbers and does not wrap; the code size is consistent with the official one
The language needs to be marked at the code block, otherwise highlighting will not work - The language needs to be marked at the code block, otherwise highlighting will not work
After pasting into the Official Account, click inside and outside the code block once with the mouse to complete highlighting - After pasting into the Official Account, click inside and outside the code block once with the mouse to complete highlighting

diff cannot be highlighted together with other languages at the same time, and you need to switch the code theme to a theme other than the WeChat code theme to see the diff effect. The usage effect is as follows:

+ Added item
- Deleted item

Other themes do not include line numbers, and you can customize whether to wrap; the code size is consistent with the current editor

3.3 Math Formulas

Supported platforms: WeChat Official Accounts, Zhihu.

How to use inline formulas, for example this chemical formula: $\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$

Block formulas are used as follows:

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

Matrix:

\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}

Because WeChat does not support formulas, the current solution is to convert them to svg and place them into WeChat; no adjustment is needed, and the vectors are not distorted.

Current testing shows that if there are too many formulas, pasting in Chrome may be unresponsive, but in Firefox it always succeeds.

3.4 TOC

Supported platforms: WeChat Official Accounts, Zhihu.

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

[TOC]

Since WeChat only supports second-level lists, this tool only supports displaying second-level and third-level headings.

3.5 Phonetic Symbols

Supported platforms: WeChat Official Accounts.

Phonetic symbols are supported, used as follows:

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

3.6 Horizontal Swipe Slideshow

Supported platforms: WeChat Official Accounts.

Use the <![](url),![](url)> syntax to set up a horizontal swipe slideshow, the specific usage is as follows: ![Blue 1](https://markdown.com.cn/images/blue.jpg),![Green 2](https://markdown.com.cn/images/green.jpg)

4 Other Syntax

4.1 HTML

Native HTML syntax is supported, please write inline styles, as follows:

<span style="display:block;text-align:right;color:orangered;">orange right-aligned</span> orange right-aligned

<span style="display:block;text-align:center;color:orangered;">orange centered</span> orange centered

4.2 UML

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

I think this tool is very good; it provides many strange but useful things. If needed, you can go check it out yourself.