Markdown is a very simple syntax, and while it’s not difficult, you’re bound to run into situations where you forget the syntax. Markdown’s syntax site does have a lot of resources, but most of them are just basic syntax. I include not only all the basic syntax, but also a lot of advanced syntax. I can find almost all of the syntax supported by Markdown here.

In order to avoid wasting time, it is recommended that you have a general view of the functions, and then go back to see when you need to use them. (Some of the syntax will not be displayed or abnormal due to browser or platform reasons).

The following layout rules are “above is the specific syntax, below is the corresponding display style”.

Basic grammar

Escape character

I am not slanting wordsCopy the code

I’m not * slant text *

The title

# 1 title # # 2 headlines # # # # # # # 3 4 headlines # # # # # # # 5 # # # # six levels of headings Another kind of writing level title = = = = = = = = = = = = = = = another writing secondary title -- -- -- -- -- -- -- -- -- -- -- -- -- -- --Copy the code

Primary title

The secondary title

Level 3 title

Level 4 titles

Five titles
Six levels of headings

Another way to write it is a first level heading

Another way of writing a secondary heading

Multi-line paragraph

First line <br> <br> second lineCopy the code

The first line





Single-line comments

[//]: This is a line of comment informationCopy the code

Multiline comment

<div style='display: none'> I am the first line comment, I am the second line comment, </div> <! I'm the first line comment, I'm the second line comment. -->Copy the code
I’m the first line comment, I’m the second line comment,

The blank space

The first word. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Second wordCopy the code

The first word and the second word

bold

I'm __ bold __ I'm ** bold **Copy the code

I’m in bold. I’m in bold

tilt

I'm _ slant _ I'm * slant *Copy the code

I’m a slant. I’m a slant

Bold tilt

I'm ___ bold slant ___ I'm *** bold slant *** I'm __* bold slant *__Copy the code

I’m using a bold slant. I’m using a bold slant

Piece of reference

> #### markdown syntax! > > - first benefit. > - second benefit. > > * Any * document is ** very good **. > > I'm a nested copywriter > > > I'm a nested, nested copywriterCopy the code

Markdown grammar!

  • The first benefit.
  • Second benefit.

Any document is a good one.

I’m a nested copywriter

I’m a nested, nested copywriter

An ordered list

1. Option 1 2. Option 2 1. Option 2.1 2. The third schemeCopy the code
  1. Scheme 1
  2. The second solution
    1. 2.1 plan
    2. 2.2 plan
  3. The third scheme

Unordered list

* Unordered list 1 + unordered list 2 - Unordered list 3Copy the code
  • Unordered list 1
  • Unordered list 2
  • Unordered list 3

code

`printf("hello world"); `Copy the code

printf("hello world");

The code block

#include<stdio.h> int main() { printf("hello world"); return 0; } ``` #include<stdio.h> int main() { printf("hello world"); return 0; } ` ` `Copy the code
#include<stdio.h>
int main()
{
   printf("hello world");
   return 0;
}
Copy the code
#include<stdio.h>
int main()
{
	printf("hello world");
	return 0;
}
Copy the code

The divider

Here is line 1 * * * here is line 2 - here is I am grateful to line 3 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --Copy the code

And then we have the dividing line one


And then we have the dividing line 2

And then we have the dividing line three



Email and URL

This is my email <[email protected]> this is the official website of Baidu <https://www.baidu.com>Copy the code

This is my email [email protected] and this is the official website of Baidu www.baidu.com

link

[baidu official website](https://www.baidu.com) [Baidu official website](https://www.baidu.com, 'You will see it when you hover over the text ') This is a **[highlighted link](https://www.baidu.com)**Copy the code

This is a ** highlighted link **

The picture

! Kosi o [images] (HTTP: / / https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e19a99d16b3472389a12a93b7f5a14c~tplv-k3u1fbpfcp-zoom-1.image "You will see it when you hover over the text ")Copy the code

Extended syntax

The list of

Left aligned among | | right alignment: - | : - : | - : markdown | very & # 124; Great | right-aligned markdown | professional & # 124; | right alignmentCopy the code
The left In the middle of alignment, Align right
markdown Very | bar Align right
markdown Professional | Align right

Code highlighting

``` Javascript if (true){ return true; } ` ` `Copy the code
if (true) {return true;
} 
Copy the code

The title ID

* directory [1] [2] (# title 1) * (# 2) title text title # # # # # 1 # # # # # title 2 written contentCopy the code
  • Directory 1
  • Directory 2
Title 1

Written content

Title 2

Written content

footnotes

Footnote 1 [^1] Footnote 2 [^2] [^1]: Contents of footnote 1 [^2]: Contents of footnote 2Copy the code

Footnote 1 1 Footnote 2 2

The task list

- [x] This is the completed task - [] This is the unfinished taskCopy the code
  • This is mission accomplished
  • This is unfinished business

Delete the line

This is the delete lineCopy the code

This is the delete line

With HTML

The font

<font face="STCAIYUN" size=5> <font face="STCAIYUN" size=5>Copy the code

I am Microsoft Yahei and I am Chinese color cloud

color

<font color=#0099ff size=5>color=#0099ff</font>
<font color=#00ffff size=5>color=#00ffff</font>
<font color=gray size=5>color=gray</font>
Copy the code

color=#0099ff color=#00ffff color=gray

superscript

n<sup>2</sup>=n+1
Copy the code

n2=n+1

The subscript

H<sub>2</sub>O
Copy the code

H2O

Special characters

Because the image is too long, it is not shown here, interested friends can click the link to view

The background color

<p style="background-color: #b6ffc8;" "> <p style="center; background-color: #ffb6d2;" <p style=" max-width: 100%; clear: both; min-height: 1em; background-color: #b6d7ff;" > blue < / p >Copy the code

green

red

blue

alignment

<p style="text-align: left; background-color: #b6ffc8;" "> <p style="text-align: center; background-color: #ffb6d2;" Word-wrap: break-word! Important; "> <p style="text-align: left; background-color: #b6d7ff;" > Right aligned </p>Copy the code

The left

Centered in the middle

Align right

Center the image and customize the size

<div style="text-align: center; background-color: #b6ffc8;" > < img SRC = "https://p.upyun.com/docs/cloud/demo.jpg" Alt = "xihe pictures o" title = "xihe o picture title" style = "width: 300 px; height:300px;" > </div>Copy the code

Insert the music

<iframe 
    frameborder="no" 
    border="0" 
    marginwidth="0" 
    marginheight="0" 
    width=100% 
    height=auto 
    src="//music.163.com/outchain/player?type=2&id=528478901&auto=1&height=66">
</iframe>
Copy the code

Insert the video

<iframe src="//player.bilibili.com/player.html?aid=10631344&cid=17548810&page=1" scrolling="no" style="border:0; width:100%; height:auto; min-height:790px;" allowfullscreen="true"> </iframe>Copy the code

  1. Footnote 1 content ↩
  2. Footnote 2 content ↩