https://www.jianshu.com/p/399e5a3c7cc5
The basic syntax that is commonly used in the preparation of .md markdown file is a fast marking, fast typesetting language, now readme documentation and many other items in the preceding paragraph are written in .md files, and many companies are encouraged to use this editing, especially as a front-end practitioner must learn to use the language. Here we share some simple and basic grammar .md
First, the basic symbols: * - +>.
Substantially all of the tags are based markdown, or a combination of these four symbols, it is noted that there is a space for partitioning tag and the tag contents if substantially to the beginning of the symbol, attention to the basic symbols.
Second, the title
1. # sign in front, behind with text, respectively, h1-h6, only to H6, and there below a horizontal line h1
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
2 corresponds to the closing tag
# 一级标题 #
## 二级标题 ##
### 三级标题 ###
#### 四级标题 ####
##### 五级标题 #####
###### 六级标题 #####
Results are as follows:
Title .png
Third, the list
- Unordered list
//形式一
+ a
+ b
+ c
//形式二
- d
- e
- f
//形式三
* g
* h
* i
These three forms, in fact, the effect is the same:
Unordered list .png
- Ordered list
//正常形式
1. abc
2. bcd
3. cde
//错序效果
2. fgh
3. ghi
5. hij
Renderings:
Ordered list and wrong sequence renderings .png
As shown, it is noted point behind the figures only English point number is the ordered list according to the order of the first row of the list number,
No. Sequence Listing wrong number is originally chaotic, but still display 23 5
- Nested list
//无序列表嵌套
+ 123
+ abc
+ bcd
+ cde
+ 465
+ 789
//有序列表嵌套
1. abcd
1. abcde
2. abcde
3. abcde
2. bcde
3. cdef
Renderings:
Nested list .png
Lists can be nested, nested list before pressing tab or spaces to indent when used to control the list of layers
Fourth, the reference to the block description
Do some description of the contents of a part of or reference to do so and so and so, then, you can use this syntax.
- Normal form
> 引用内容、说明内容。在语句前面加一个 > ，注意是英文的那个右尖括号，注意空格，引用因为是一个区块，理论上是应该什么内容都可以放，比如说：标题，列表，引用等等。
Renderings:
Block .png
- Nested blocks
here I just introduce my commonly used method, but also a way to think fairly standard, it is to give a block under the block one more right angle bracket
> 一级引用
>> 二级引用
>>> 三级引用
>>>> 四级引用
>>>>> 五级引用
>>>>>> 六级引用
Renderings:
Nested blocks .png
V. block
In the article published some technical issues involved will show the code, the code block this time is particularly important.
- A small amount of codes, using a single line, with `wrapped up directly on the line
` shaoliangdaima,danhangshiyong `
Renderings:
Single line of code blocks .png
- A lot of code, you need to use multiple lines, wrapped up with `` `
```
daliangdaima,xuyaoduohangshiyong
daliangdaima,xuyaoduohangshiyong
daliangdaima,xuyaoduohangshiyong
daliangdaima,xuyaoduohangshiyong
daliangdaima,xuyaoduohangshiyong
```
Renderings:
Multiple lines of code .png
Sixth, links
- Inline style
text of the link in [], the link address in the subsequent (), the link with title attribute may be, a space behind the link address, then quotes
[简书](https://www.jianshu.com "创作你的创作"),
是一个创作社区,任何人均可以在其上进行创作。用户在简书上面可以方便的创作自己的作品,互相交流。
- 参数式
链接的文字放在[]中，链接地址放在随后的:后，链接地址后面空一格，然后用引号引起来
[简书]: https://www.jianshu.com "创作你的创作"
[简书]是一个创作社区,任何人均可以在其上进行创作。用户在简书上面可以方便的创作自己的作品,互相交流。
//参数定义的其他写法
[简书]: https://www.jianshu.com '创作你的创作'
[简书]: https://www.jianshu.com (创作你的创作)
[简书]: <https://www.jianshu.com> "创作你的创作"
以上两种方式其效果图都是一样的，如下：
链接.png
七、图片
- 行内式
和链接的形式差不多，图片的名字放在[]中，图片地址放在随后的()中，title属性（图片地址后面空一格，然后用引号引起来）,注意的是[]前要加上!
- 参数式
图片的文字放在[]中，图片地址放在随后的:后，title属性（图片地址后面空一格，然后用引号引起来）,注意引用图片的时候在[]前要加上!
[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]
//参数定义的其他写法
[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"
以上两种方式其效果图都是一样的，如下：
my-logo.png
八、分割线
分割线可以由* - _（星号，减号，底线）这3个符号的至少3个符号表示，注意至少要3个，且不需要连续，有空格也可以
---
- - -
------
***
* * *
******
___
_ _ _
______
以上代码的效果图均为：
分割线.png
九、其他
- 强调字体
一个星号或者是一个下划线包起来，会转换为<em>倾斜，如果是2个，会转换为<strong>加粗
*md*
**md**
_md_
__md__
效果图：
强调字体.png
- 转义
基本上和js转义一样,\加需要转义的字符
\\
\*
\+
\-
\`
\_
- 删除线
用~~把需要显示删除线的字符包裹起来
~~删除~~
效果图：
删除线.png
十、表格
//例子一
|123|234|345|
|:-|:-:|-:|
|abc|bcd|cde|
|abc|bcd|cde|
|abc|bcd|cde|
//例子二
|123|234|345|
|:---|:---:|---:|
|abc|bcd|cde|
|abc|bcd|cde|
|abc|bcd|cde|
//例子三
123|234|345
:-|:-:|-:
abc|bcd|cde
abc|bcd|cde
abc|bcd|cde
上面三个例子的效果一样，由此可得：
1. 表格的格式不一定要对的非常起，但是为了良好的变成风格，尽量对齐是最好的
2. 分割线后面的冒号表示对齐方式，写在左边表示左对齐，右边为右对齐，两边都写表示居中
效果图如下：
表格.png
作者：忆小五
链接：https://www.jianshu.com/p/399e5a3c7cc5
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。