Introduction to. MD grammar

.md namely markdown The basic common writing syntax of a document , It's a quick marker 、 Fast typesetting language , Now a lot of the documents in the previous project readme And so on .md The document was written by , And many companies are encouraging the use of this editing method , Especially as a front-end practitioner, we should learn to use this language . Now I'd like to share some with you .md Basic grammar

One 、 Basic symbols ：* - +. >

Basically all markdown Tags are based on these four symbols or combinations , It should be noted that , If the mark begins with the basic symbol , Notice that there is a space after the base symbol to separate the marker from the content .

Two 、 title

1. Anterior band # Number , It's followed by text , respectively h1-h6, Only to h6, and h1 There will be a horizontal line below

#  First level title 
##  Secondary title 
###  Three level title 
####  The fourth level title 
#####  Five level titles 
######  Six level title 

2. It's equivalent to closing the label

#  First level title  #
##  Secondary title  ##
###  Three level title  ###
####  The fourth level title  ####
#####  Five level titles  #####
######  Six level title  #####

The effect is as follows ：

 

title .png

3、 ... and 、 list

1. Unordered list

// Form 1 
+ a
+ b
+ c
// Form 2 
- d
- e
- f
// Form 3 
* g
* h
* i

 

 

The above three forms , The effect is actually the same ：

 

Unordered list .png

2. Ordered list

// Normal form 
1. abc
2. bcd
3. cde
// Wrong order effect 
2. fgh
3. ghi
5. hij

 

 

design sketch ：

 

Ordered list and out of order renderings .png

Pictured , Be careful , The dots after the numbers can only be English dots , The ordinal number of an ordered list is based on the numerical order of the first line of the list ,
The sequence number of the wrong order list is originally disordered , But it still shows 2 3 5

3. Nested list

// Unordered list nesting 
+ 123
    + abc
    + bcd
 + cde
+ 465
+ 789
// Ordered list nesting 
1. abcd
 1. abcde
 2. abcde
 3. abcde
2. bcde
3. cdef

 

 

design sketch ：

 

Nested list .png

Lists can be nested , When using, press... Before nesting the list tab or Space To indent , To control the number of levels in the list

Four 、 Reference description block

Make some explanation to the content of a certain part or quote the words of so and so on , You can use this grammar .

1. Normal form

>  Quotes 、 Description . Add a word before the sentence  > , Notice the right angle bracket in English , Note blank space , Reference because it's a block , In theory, it should be possible to put any content , for instance ： title , list , Quotes, etc .

 

 

design sketch ：

 

block .png

2. Nested blocks
   Here I'll just introduce my common methods , It is also a method that I think is more standardized , It is to add an extra right angle bracket to the next level block of the block

>  First level citation 
>>  Two level citation 
>>>  Three level quotation 
>>>>  Fourth level quotation 
>>>>>  Five levels of quotation 
>>>>>>  Level six quotes 

 

 

design sketch ：

 

Nested blocks .png

5、 ... and 、 Code block

In the release of some technical articles will involve the issue of showing the code , At this time, the code block is particularly important .

1. A small amount of code , Single line use , Direct use ` Just wrap it up

` shaoliangdaima,danhangshiyong `

 

 

design sketch ：

 

Single line code block .png

2. A lot of code , Need more than one line to use , use ``` Wrap it up

    ```
        daliangdaima,xuyaoduohangshiyong
        daliangdaima,xuyaoduohangshiyong
        daliangdaima,xuyaoduohangshiyong
        daliangdaima,xuyaoduohangshiyong
        daliangdaima,xuyaoduohangshiyong
    ```

 

 

design sketch ：

 

Many lines of code .png

6、 ... and 、 link

1. Inline
   The text of the link is placed in [] in , The link address is placed next to () in , Links can also take title attribute , There is a blank space after the link address , And then quote it in quotation marks

[ Simple books ](https://www.jianshu.com " Create your creation "),
 It's a creative community , Anyone can create on it . Users can easily create their own works on the short books , Communicate with each other . 

2. Parametric formula
   The text of the link is placed in [] in , The link address is placed next to : after , There is a blank space after the link address , And then quote it in quotation marks

[ Simple books ]: https://www.jianshu.com " Create your creation "
[ Simple books ] It's a creative community , Anyone can create on it . Users can easily create their own works on the short books , Communicate with each other .
// Other ways to write parameter definitions 
[ Simple books ]: https://www.jianshu.com ' Create your creation '
[ Simple books ]: https://www.jianshu.com ( Create your creation )
[ Simple books ]: <https://www.jianshu.com> " Create your creation "

 

 

The effects of the above two ways are the same , as follows ：

 

link .png

7、 ... and 、 picture

1. Inline
   Similar to the form of links , The name of the picture is placed in [] in , The photo address is placed next to () in ,title attribute （ There is a blank space after the image address , And then quote it in quotation marks ）, Pay attention to is [] Add... Before !

![my-logo.png](https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "my-logo")

2. Parametric formula
   The text of the picture is placed in [] in , The photo address is placed next to : after ,title attribute （ There is a blank space after the image address , And then quote it in quotation marks ）, Note that the reference to the picture is in [] Add... Before !

[my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "my-logo"
![my-logo.png]
// Other ways to write parameter definitions 
[my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 'my-logo'
[my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 (my-logo)
[my-logo.png]: <https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240> "my-logo"

 

 

The effects of the above two ways are the same , as follows ：

 

my-logo.png

8、 ... and 、 Split line

The dividing line can be divided by * - _（ asterisk , minus sign , The bottom line ） this 3 At least... Of the symbols 3 A symbol means , Pay attention to at least 3 individual , And it doesn't need to be continuous , You can also

---
- - -
------
***
* * *
******
___
_ _ _
______

 

 

The above code renderings are ：

 

Split line .png

Nine 、 other

1. Emphasis on Fonts
   An asterisk or an underline , Will be converted to <em> tilt , If it is 2 individual , Will be converted to <strong> In bold

*md*    
**md**
_md_   
 __md__

 

 

design sketch ：

 

Emphasis on Fonts .png

2. escape
   Basically and js It's the same as the meaning ,\ Add characters that need to be escaped

\\
\*
\+
\-
\`
\_

3. Delete line
   use ~~ Wrap the characters that need to show the strikeout

~~ Delete ~~

 

 

design sketch ：

 

Delete line .png

Ten 、 form

// Example a 
|123|234|345|
|:-|:-:|-:|
|abc|bcd|cde|
|abc|bcd|cde|
|abc|bcd|cde|
// Example 2 
|123|234|345|
|:---|:---:|---:|
|abc|bcd|cde|
|abc|bcd|cde|
|abc|bcd|cde|
// Example 3 
123|234|345
:-|:-:|-:
abc|bcd|cde
abc|bcd|cde
abc|bcd|cde

The above three examples have the same effect , It can be obtained. ：
1. The format of the table doesn't have to be very accurate , But in order to be a good style , It's best to align as much as possible
2. The colon after the divider indicates alignment , Write on the left for left alignment , Right is right alignment , Write on both sides for Center

The renderings are as follows ：

 

form .png

Reprinted from ：https://www.jianshu.com/p/399e5a3c7cc5