三张图弄懂如何在READMD.md使用基本的markdown语法

最近看到被人GitHub项目上的READMD排版得很漂亮，就去了解了一下，原来背后是用markdown语法编写的，md即markdown的缩写，READMD也是支持markdown语法的，同时大部分博客的可视化编写也有一定的markdown基础，所以掌握markdown基本语法对我们很有帮助。

本文分为三部分，第三部分是如何在GitHub上编写readmd，第二部分是markdown的基本语法，第三部分是markdown的可视化图，读者只要结合最后俩部分来看，就能满足READMD上的基本需求，同时这也是本人的第一篇学习笔记，供以后查看，也希望可以帮助到大家，有错误欢迎指出。

• GitHub上编写readmd

首先打开你的github主页，按以下步骤。

然后看下图。

红色框区域就是编写markdown语法的地方，绿色框就是预览效果图，接下来就可以开始学习markdown了。

• markdown的基本语法

1. markdown一级标题（0个数以上的=）
2. ====
3. 二级标题(0个数以上的-)
4. ----
5. # 一级标题
6. ## 二级标题
7. ### 三级标题
8. #### 四级标题
9. ##### 五级标题
10. ###### 六级标题
11. ### 横线
12. 加横线(三个以上下滑线_)
13. ___
14. 加横线(三个以上星号*)
15. ***
16. ### 普通文本
17. 你好，这是一段普通文本
18. ### 换行
19. 直接回车不能换行 <br> 
20. 要使用 \<br> 或 \<\br> <br>
21. ### 普通URL
22. 超连接直接写URL：https://github.com/13660139155/SVGTest <br>
23. ### 单行文字空格
24.  单行文字首个空格都会被忽略 <br>
25.  如果想要显示首行空格，把输入法的半角改成全角输入 <br>
26. ### 单行文字显示
27.     单行文本显示，在首行加入俩个tab键或四个空格 <br>
28. ### 多行文字显示
29.     多行文本显示，在首行加入俩个tab键或四个空格 <br>
30.     多行文本显示，在首行加入俩个tab键或四个空格 <br>
31.     多行文本显示，在首行加入俩个tab键或四个空格 <br>
32. ### 文字高亮显示
33. 如果你想使一段话中部分文字`高亮显示`，来起到突出`强调的作用`，那么可以把它用 \`  ` 包围起来。注意这不是单引号，而是Tab上方，数字1左边的按键（注意使用英文输入法）<br>
34. ### 文字链接
35. 给一段文字加入超链接的格式：[Github地址](https://github.com/13660139155/SVGTest) <br>
36. 给一段文字加入超链接的格式,你还可以给他加上一个鼠标悬停显示的文本（把鼠标放在文字链家上会有文字悬停提示）: [Github地址](https://github.com/13660139155/SVGTest "悬停显示")，即在URL之后 用双引号括起来一个字符串 <br>
37. ### 圆点符分级
38. * 一级圆点号 ，markdown中用 星号 + 空格 表示，不加空格则为普通星号， *普通星号 <br>
39.   * 二级圆点号，tab + 星号 + 空格 表示
40.     * 三级圆点号，俩个tab + 星号 + 空格 表示
41. ### 缩进符分级
42. > 层次一  
43. >> 层次二
44. >>> 层次三  
45. >>>> 层次四
46. >>>>> 层次五
47. ### 普通分级
48. 1. 就是在数字后面加一个点，再加一个空格
49. 2. 就是在数字后面加一个点，再加一个空格
50. 3. 就是在数字后面加一个点，再加一个空格
51. ### 插入图片
52. #### 来源于网络的图片,格式：\!\[](图片URL)
53.     
54. * []方括号里加描述，这个方括号里的描述并不会对图像显示造成任何改动 <br>
55.   
56. * 在URL后面，加一个双引号包围的字符串，显示悬停 <br>
57. 
58. #### GitHub仓库里的图片，格式：\!\[](图片URL)
59. * 其实与上面的格式基本一致的，所不同的就是括号里的URL该怎么写
60.   * ` https://github.com/ 你的用户名 / 你的项目名 / raw / 分支名 / 存放图片的文件夹 / 该文件夹下的图片`
61. 
62. #### 给图片加上超链接，格式：文字链接格式 + 插入图片格式 即：\[\!\[](图片URL)\](图片的超链接)
63. [](http://www.baidu.com)
64. * 文字悬停，第一种方式 <br>
65. [](http://www.baidu.com)
66. * 文字悬停，第二种方式 <br>
67. [](http://www.baidu.com "百度")
68. ###上传gif图片，格式：\!\[](gifURL)
69. * 其实与上面的图片格式基本一致的，所不同的就是括号里的URL该怎么写
70.   * ` https://github.com/ 你的用户名 / 你的项目名 / blob/ 分支名 / 存放gif的文件夹 / 该文件夹下的gif`
71. 
72. ### 插入代码片段
73. 需要在代码的上一行和下一行用``` 标记，``` 不是三个单引号，而是数字1左边，Tab键上面的键，要实现语法高亮那么只要在 ``` 之后加上你的编程语言即可（忽略大小写）<br>
74. * 普通写法
75. ```
76. Drawable drawable = ivSystem.getDrawable();//java
77. ```
78. * 高亮写法
79. ``` java
80. Drawable drawable = ivSystem.getDrawable();//java
81. ```
82. ### 锚点 （移动到某个位置）
83. 其实呢，每一个标题都是一个锚点，比如 [回到顶部](#一级标题)
84. ### 表格 （每个格短横线-要大于一个）
85. |表头1  |表头2  |
86. |- |-------|
87. |内容1  |内容2  |
88. |内容1  |内容2  |
89. ### 字体
90. |语法    |效果  |
91. |-------|-------|
92. | \*斜体1* | *斜体1* |
93. | \_斜体2_ | _斜体2_|
94. | \*\*粗体1** | **粗体1** |
95. | \_\_粗体2__ | __粗体2__|
96. |  \~\~删除线~~ | ~~删除线~~ |
97. | \*\*\*斜粗体1*** | ***斜粗体1*** |
98. | \_\_\_斜粗体2___ | ___斜粗体2___ |
99. | \*\*\*\~\~斜粗体删除线1~~*** | ***~~斜粗体删除线1~~*** |
100. | \~\~\*\*\*斜粗体删除线2***~~ | ~~***斜粗体删除线2***~~ |

---

看一下上图的源文再看一下下图，就能秒懂了。

 

• markdown的可视化图

 

---

 

好了，以上就是全部内容，要注意的地方，都在上面标注了，同时要注意上面的输入除了中文，所有的标点符号都是在英文输入下输入的，还有第二部分的`\`是转义字符。以后会不定期更新。