当前位置:网站首页>Introduction to. MD grammar

Introduction to. MD grammar

2020-11-10 10:44:13 Dawn

.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
  1. 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

  1. 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
  1. 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
  1. 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 . 
  1. 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")
  1. 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
  1. escape
    Basically and js It's the same as the meaning ,\ Add characters that need to be escaped
\\
\*
\+
\-
\`
\_
  1. 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


版权声明
本文为[Dawn]所创,转载请带上原文链接,感谢