Markdown syntax - from basic to advanced

The times are advancing, and more and more people and software are beginning to use Markdown for text editing , and its editing convenience makes many people love it. However, the unavoidable problem is that when editing, we often need to go to google. After all, we are used to the visual operation symbols of office. Many times, we only pay attention to the operation without knowing the principle, which will cause us to forget some Uncommon operation.

In order not to go to Google all the time, here are some markdown grammars. Just reading this article can solve 80% of markdown problems.

Next, show the basic grammar, which can complete most of the editing needs.
You can use the Chinese version of StackEdit to familiarize yourself with the syntax of Markdown ( https://stackedit.cn/app# ) online.
You can also refer to the official website of Markdown for learning: https://markdown.com.cn/basic-syntax/

1 Basic Edition

1.1 Title

Titles can be displayed in two ways, Atx-like form and Setext-like form.
We generally use the Atx-like form.
In the Atx-like form, 1 to 6 # are inserted at the beginning of the line, corresponding to the headings 1 to 6.

grammar:

# SpaceFirst-level title text
## SpaceSecond-level title text
### SpaceThird-level title text
#### SpaceFourth-level title text
##### SpaceFive-level title text
###### SpaceSixth-level title text

exhibit:

1.2 Fonts

Common font formats include bold, italic, strikethrough, highlight, and inline code ;
these font formats can be combined at will .

Markdown uses an asterisk ( ) and an underscore (_) as symbols to mark emphasized words, and both symbols can implement font formatting.
The only restriction is that the symbol that opens the tag must end with the symbol .
Generally recommended , because there is no need to switch input methods.

Note ⚠️
1. If there are spaces on both sides of * and _, they will only be treated as ordinary symbols.
2. If you want to insert ordinary asterisks or underscores directly before and after the text, you can use backslash \

1.2.1 Bold

grammar:

**Bold** Space
__This is also bold__Space

exhibit:

1.2.2 Italics

grammar:

*italics* Space
_this is also italics_Space

exhibit:

1.2.3 Strikethrough

grammar:

~~strikethrough~~Space

exhibit:

1.2.4 Highlight

grammar:

==Highlight==Space

exhibit:

1.2.5 Inline code

grammar:

`inline code`Space

exhibit:

The above is the grammar of some special fonts. Of course, some combinations can also be made according to actual needs, such as:

1.3 Dividing line

More than three asterisks, minus signs, and underscores can be used in a line to create a separator line, and there can be no other things in the line. You can also insert spaces between asterisks or minus signs. Each of the following notations can create a divider:

grammar:

----
****
____
- - -

exhibit:

1.4 list

Lists are divided into unordered lists, ordered lists, and task lists.

1.4.1 Unordered lists

Unordered lists use asterisks, plus or minus signs as list markers. It is generally recommended to use the minus sign , because the asterisk will trigger the title attribute, and the plus sign will trigger special effects on some apps.

Lists can be nested, just type three spaces between the previous level and the next level, and then press Enter in one line.

grammar:

-unordered Spacelist 1
-unordered Spacelist 2
Space``Space``Space
-unordered Spacelist 2-1
-unordered Spacelist 2-2
Space``Space``Space``Space``Space``Space
-unordered Spacelist 2-2-1

exhibit:

1.4.2 Ordered Lists

The ordered list uses the number + English period + space
syntax:

1. SpaceOrdered list 1
2. SpaceOrdered list 2
3.Space

exhibit:

1.4.3 Task list

The task list is generally used for design task organization.
Completed the task, you can add "x" in the middle of []. Note - Space syntax
after, within [ ] and after [ ] :

- Space[ Space] SpaceMission 1
- Space[x] SpaceMission 2
- Space[ Space] SpaceMission 3

exhibit:

1.5 Code blocks

The code block can support the code format, or it can not be written by default.

grammar:

```javaScript Enter
code
content````Enter`

exhibit:

1.6 References

Just add > before the quoted text. Create a block reference in the Markdown file. Markdown also supports multi-layer references, similar to the title, just add > continuously.

grammar:

> Spacequoted text
> Space> Spacesecond level of citation
> Space> Space> Spacethird level of citation

exhibit:

1.7 Insert picture

exhibit:

1.8 Hyperlinks

Jump to the hyperlink navigation of other websites, use [] to write text, and then write the hyperlink address behind ().
To add the title text of the link, just add a space after the URL, and then wrap the title text in double quotes.
grammar:

This will jump to the Yuque Garden of [干复道](https://www.yuque.com/morange)
; "The Yuque Garden of Ganfudao") Yuque Garden;

exhibit:

1.9 Form

grammar:

| header| header| header|
| :-- | :–: | ----: |
|content| content| content|

Operation interpretation:

• | is in English format, the original syntax must be wrapped with | on both sides, it is recommended to follow;
• The first line is the header;
• The second line separates the header and content. - One is enough, for alignment, a few more are added;
  • The text is on the left by default, and a colon can also be added to the left of -;
  • • Add colons on both sides to indicate that the text is centered;
  • • A colon is added to the right to indicate that the text is on the right;

exhibit:

2 Advanced

The syntax of the basic version is sufficient for most situations. Of course, sometimes we want to make the document look more beautiful, so we can use some advanced syntax for typesetting. In fact, it is achieved through HTML tags.
This requires a little knowledge of HTML, so I won’t explain HTML here, just go straight to the grammar and display, and feel it yourself!

2.1 Fonts

2.1.1 Change font, size, color

grammar:

<font face="黑体">I am bold</font>
<font face="Microsoft Yahei">I am Microsoft Yahei</font>
<font face="STCAIYUN">I am Huawen Caiyun</font >
<font color=red>I am red</font>
<font color=#008000>I am green</font>
<font color=Blue>I am blue</font>
<font size=5>I am Size</font>
<font face="黑体" color=green size=5>I am blackbody, green, size 5</font>

exhibit:

2.1.2 Add text background color

grammar:

<table><tr><td bgcolor=yellow>背景色yellow</td></tr></table>

exhibit:

2.1.3 Text Center, Left Alignment, Right Alignment

grammar:

<center >Center</center>
<p align="left">left alignment</p>
<p align="right">right alignment</p>

exhibit:

2.1.4 Text superscript and subscript

grammar:

superscript^th^
subscript~th~

exhibit:

2.2 Hyperlinks

When a hyperlink is clicked, a new tab is opened .
grammar:

<a href="https://www.yuque.com/morange" target="_blank">Yuque Garden in Ganfu Road</a>

exhibit:

Use the reference style to manage links in a unified manner.
The reference-style definition of the link can be placed anywhere in the file. I prefer to put it directly at the end of the file, just like a comment.

• The form of the link content is: _Square brackets (optionally preceded by up to three spaces for indentation), enter the link text inside_followed by a colon_followed by one or more spaces or tabs_followed by the URL of the link_ Optionally follow the title content, which can be enclosed in single quotes, double quotes or brackets_The link URL can also be wrapped in angle brackets

grammar:

[Yuque Garden of Ganfu Road][index]
[Baidu Homepage][baidu]

[index]:https://www.yuque.com/morange “title”
[baidu]:https:www.baidu.com

exhibit:

Automatic links , that is, directly displaying http addresses in articles, are generally used to display URLs or email addresses.
grammar:

<https://www.yuque.com/morange>

exhibit:

2.3 Directory

It is very simple to automatically generate a table of contents, just add [TOC] where you want to generate a table of contents.

grammar:

[TOC]

# 1 title
content 1

## 1-1 title
content 1-1

----

#2 Title

----

exhibit:

2.4 UML diagrams, flowcharts, Gantt charts, pie charts

UML diagrams, flow charts, and Gantt diagrams, in fact, there are many professional ones that can be implemented. In fact, it is not recommended to use markdown. After all, writing these diagrams in markdown will be more troublesome and not conducive to modification.
You can also refer to the illustrations in the rookie tutorial ( https://www.runoob.com/markdown/md-advance.html ).

2.4.1 UML diagrams

grammar:

```mermaid
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob–>>John: John, how about you?
Bob–x Alice: I'm fine, thanks!
Bob-x John: I'm fine, thanks!
Note right of John: Bob thought for a long
, long time that
the text was really too long
to fit on one line.

Bob–>Alice: Checking with John…
Alice ->John: Yes…John, how are you?
```

exhibit:

2.4.2 Flowchart

grammar:

```mermaid
graph LR
A[rectangle] – link text --> B((circle))
A --> C(rounded rectangle)
B --> D{diamond}
C --> D
```

exhibit:

2.4.3 Gantt chart

grammar:

```mermaid
gantt
title This is an example of a Gantt chart
dateFormat MM-DD

section Software collaborative development course
Project initiation: done, des1, 03-09, 7d
Project plan: done, des2, after des1, 6d
Demand analysis: done, des3, after des2, 9d
Software design: done, des4, after des3, 12d
Software coding: crit, active, des5, 04-07, 20d
Software testing: des6, 04-14, 15d
Project delivery: des7, after des6, 4d
\ ```

exhibit:

2.4.3 Pie Chart

grammar:

```mermaid
pie
title Proportion of urban survival training ability
"Independence": 15
"Emotional Intelligence": 20
"Interpersonal Communication": 15 "Geography
Common Knowledge": 10
"Financial Intelligence": 10
"Security Protection": 20
"Gratitude" heart" : 10
```

exhibit:

3. Conclusion

After learning the above markdown syntax, I believe that most of the operation scenarios can be completed. Of course, if you have any operating syntax, you can also discuss it with me and enrich the document together.

When the accumulation of soil becomes a mountain, the wind and rain will flourish; Therefore, if you don't accumulate steps, you won't reach thousands of miles; if you don't accumulate small streams, you won't be able to form rivers and seas. A galloping horse can't take ten steps in one leap; a rough horse can ride ten times, and the merits are endless. If you persevere, you will not break the dead wood; if you persevere, you can carve gold and stone. Earthworms do not have the sharpness of claws and teeth, but have strong muscles and bones. They feed on the soil on the top and drink the springs on the bottom. Crabs have six knees and two claws. They are not the caves of snakes and eels and have nothing to rely on. They are also restless.
—— " Encouraging Learning "