md文件的编辑

布满荆棘的人生 2022-04-18 03:04 430阅读 0赞

# 序言: #

很久没有写博客了，感觉只要是不写博客，人就很变得很懒，学的知识点感觉还是记不住，渐渐地让我明白，看的越多，懂的越少（你这话不是有毛病吗？应该是看的越多，懂的越多才对），此话怎讲，当你在茫茫的前端知识库里面东看看，西看看的时候，很快就被海量的知识给淹没了，根本就不知道哪些是对的，哪些是错的，感觉好像这个也懂了，那个也懂了，但是真正写起来，脑子又一片空白，又好像什么都不懂，这种状态时有发生，这就叫不懂装懂，最根本的原因就是看的太多，写的太少，所以为了改掉这样毛病，把被动学习变成主动学习，接下来的日子，多写写，即使是写一些学习工作中遇到的坑也是好的，没事翻出来看看，还可以加深印象，好了，废话到处！

起因：

因为现在的前端基本上都用上了前端构建工具，那就难免要写一些readme等等的说明性文件，但是这样的文件一般都是.md的文件，编写的语法自然跟其他格式的文件有所区别，置于为什么要用这种格式的文件，不要问我，我也不知道，大家都这么用，跟着用就对了，如果有大神知道的，不妨告知小弟，本文也是我学习写markdown文件的一个笔记吧，仅供参考！

正文：

1、标题的几种写法：

第一种：

![600165-20170121165256359-1045755089.png][]   ![600165-20170121165419890-1445220158.png][]

前面带\#号，后面带文字，分别表示h1-h6,上图可以看出，只到h6，而且h1下面会有一条横线，注意，\#号后面有空格

第二种：

![600165-20170121165937218-1530465248.png][]    ![600165-20170121165947968-314903197.png][]

这种方式好像只能表示一级和二级标题，而且=和-的数量没有限制，只要大于一个就行

第三种：

![600165-20170121170247156-1219352477.png][]   ![600165-20170121170255531-442290753.png][]

这里的标题支持h1-h6，为了减少篇幅，我就偷个懒，只写前面二个，这个比较好理解，相当于标签闭合，注意，标题与\#号要有空格

那既然3种都可以使用，可不可以混合使用呢？我试了一下，是可以的，但是为了让页面标签的统一性，不建议混合使用，推荐使用第一种，比较简洁，全面

为了搞清楚原理，我特意在网上搜一下在线编写markdown的工具，发现实际上是把这些标签最后转化为html标签，如图：

![600165-20170121172350078-1462814017.png][]

在线地址请看这里： [markdown在线编辑][markdown] （只是想看看背后的转换原理，没有广告之嫌）

2、列表

我们都知道，列表分为有序列表和无序列表，下面直接展示2种列表的写法：

![600165-20170121171909093-661987876.png][]   ![600165-20170121171919343-1747027523.png][]

可以看到，无序列表可以用\* ， + ， — 来创建，用在线编辑器看，实际上是转换成了ul>li ，所以使用哪个都可以，推荐使用\*吧

![600165-20170121173226140-1875382054.png][]    ![600165-20170121173239421-1080651187.png][]

有序列表就相对简单一点，只有这一种方式，注意，数字后面的点只能是英文的点，特别注意，有序列表的序号是根据第一行列表的数字顺序来的，比如说：

![600165-20170121175940718-1084956249.png][]  ![600165-20170121175948687-1987133124.png][]  ![600165-20170121175958281-1526944139.png][]  ![600165-20170121180005984-1893005909.png][]

第一组本来是3 2 1 倒序，但是现实3 4 5 ，后面一组 序号是乱的， 但是还是显示 3 4 5 ，这点必须注意了

3、区块引用

比如说，你想对某个部分做的内容做一些说明或者引用某某的话等，可以用这个语句

![600165-20170121174024531-1893848795.png][]  ![600165-20170121174034406-909064775.png][]

无序列表下方的便是引用，可以有多种用途，看你的需求了，用法就是在语句前面加一个 > ，注意是英文的那个右尖括号，注意空格

引用因为是一个区块，理论上是应该什么内容都可以放，比如说：标题，列表，引用等等，看看下图：

![600165-20170121174722343-1828411427.png][]   ![600165-20170121174734109-810075211.png][]

将上面的代码稍微改一下，全部加上引用标签，就变成了一个大的引用，还有引用里面还有引用，那引用嵌套引用还没有别的写法呢？

![600165-20170121175159984-1386789693.png][]    ![600165-20170121175207031-1980491226.png][]

上图可以看出，想要在上一次引用中嵌套一层引用，只需多加一个>，理论上可以无限嵌套，我就不整那么多了，注意：多层嵌套的>是不需要连续在一起的，只要在一行就可以了，中间允许有空格，但是为了好看，还是把排版搞好吧

4、华丽的分割线

分割线可以由\* - \_（星号，减号，底线）这3个符号的至少3个符号表示，注意至少要3个，且不需要连续，有空格也可以

![600165-20170121180722171-1035491697.png][]   ![600165-20170121180731562-316920662.png][]

应该看得懂吧，但是为了代码的排版好看，你们自己定规则吧，前面有用到星号，建议用减号

5、链接

支持2种链接方式：行内式和参数式，不管是哪一种，链接文字都是用 \[方括号\] 来标记。

![600165-20170121181659734-1035365203.png][]    ![600165-20170121181708390-1994007685.png][]

上图可知，行内式的链接格式是：链接的文字放在\[\]中，链接地址放在随后的（）中，举一反三，经常出现的列表链接就应该这样写：

![600165-20170121182158531-1522139664.png][]  ![600165-20170121182206671-1837073264.png][]

链接还可以带title属性，好像也只能带title，带不了其他属性，注意，是链接地址后面空一格，然后用引号引起来

![600165-20170121182852468-1462512454.png][]

这是行内式的写法，参数式的怎么写：

![600165-20170121183435890-1350949010.png][]    ![600165-20170121183445640-1750855701.png][]

这就好理解了，就是把链接当成参数，适合多出使用相同链接的场景，注意参数的对应关系，参数定义时，这3种写法都可以：

\[foo\]: http://example.com/ "Optional Title Here"

\[foo\]: http://example.com/ 'Optional Title Here'

\[foo\]: http://example.com/ (Optional Title Here)

还支持这种写法，如果你不想混淆的话：

\[foo\]: <http://example.com/> "Optional Title Here"

其实还有一种隐式链接的写法，但是我觉得那种写法不直观，所以就不写了，经常用的一般就上面2种，如果你想了解隐式链接，可以看我文章最后放出的参考地址

6、图片

图片也有2种方式：行内式和参数式，

![600165-20170121185054312-549083784.png][]   ![600165-20170121185106031-1426410254.png][]

用法跟链接的基本一样，唯一的不同就是，图片前面要写一个！（这是必须的），没什么好说的

7、代码框

这个就比较重要了，很多时候都需要展示出一些代码

如果代码量比较少，只有单行的话，可以用单反引号包起来，如下：

![600165-20170121190316875-1459932813.png][]   ![600165-20170121190325703-1235022505.png][]

要是多行这个就不行了，多行可以用这个：

![600165-20170121190613718-1073029883.png][]    ![600165-20170121190635656-1896064058.png][]

多行用三个反引号，如果要写注释，可以在反引号后面写

8、表格

这个写的有点麻烦，注意看

![600165-20170121192302156-105192980.png][]    ![600165-20170121192312453-411896732.png][]

从这3种不同写法看，表格的格式不一定要对的非常起，但是为了好看，对齐肯定是最好的，第一种的分割线后面的冒号表示对齐方式，写在左边表示左对齐，右边为右对齐，两边都写表示居中，还是有点意思的，不过现实出来的结果是，表格外面并没有线框包起来，不知道别人的怎么弄的

9、强调

![600165-20170121193336406-237336360.png][]     ![600165-20170121193346781-1402792187.png][]

一个星号或者是一个下划线包起来，会转换为<em>倾斜，如果是2个，会转换为<strong>加粗

10、转义

![600165-20170121193837156-99120890.png][]     ![600165-20170121193847093-1553208687.png][]

就不一一列举了，基本上跟js转义是一样的

11、删除线

![600165-20170121194131015-499064556.png][]   ![600165-20170121194138656-989711852.png][]

常用的基本上就这些了，如果还有一些常用的，可以跟我留言，我补充上去，我觉得图文并茂才是高效学习的正确姿势，但愿为你的学习带来帮助！

# 参考文献： #

[http://www.appinn.com/markdown/][http_www.appinn.com_markdown]

[http://sspai.com/25137][http_sspai.com_25137]

原创不易，如需转载，请标明出处！

[600165-20170121165256359-1045755089.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121165256359-1045755089.png
[600165-20170121165419890-1445220158.png]: /images/20220418/2075656b83c44226acbdaa6a6dfcae7a.png
[600165-20170121165937218-1530465248.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121165937218-1530465248.png
[600165-20170121165947968-314903197.png]: /images/20220418/7f857348c28e454185dbf0d3815519b5.png
[600165-20170121170247156-1219352477.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121170247156-1219352477.png
[600165-20170121170255531-442290753.png]: /images/20220418/f79b9b100d77403fa67835a4966b2b27.png
[600165-20170121172350078-1462814017.png]: /images/20220418/aa4dbb13d1cd4b04a0ad32e4865b7128.png
[markdown]: http://tool.oschina.net/markdown/
[600165-20170121171909093-661987876.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121171909093-661987876.png
[600165-20170121171919343-1747027523.png]: /images/20220418/9c240ed2597d4f9498485eae0e5ec4cc.png
[600165-20170121173226140-1875382054.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121173226140-1875382054.png
[600165-20170121173239421-1080651187.png]: /images/20220418/60a4f0104c5b4cd4a10eb64f36b138d4.png
[600165-20170121175940718-1084956249.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121175940718-1084956249.png
[600165-20170121175948687-1987133124.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121175948687-1987133124.png
[600165-20170121175958281-1526944139.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121175958281-1526944139.png
[600165-20170121180005984-1893005909.png]: /images/20220418/909b6ea90fe94a2c80b94be3b2c0560c.png
[600165-20170121174024531-1893848795.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121174024531-1893848795.png
[600165-20170121174034406-909064775.png]: /images/20220418/376173570f39485b90fef573ccd7bc04.png
[600165-20170121174722343-1828411427.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121174722343-1828411427.png
[600165-20170121174734109-810075211.png]: /images/20220418/d03e1117a16948a0a81027ab401c5168.png
[600165-20170121175159984-1386789693.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121175159984-1386789693.png
[600165-20170121175207031-1980491226.png]: /images/20220418/33bf0b61bb28497bb26c270498d1a528.png
[600165-20170121180722171-1035491697.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121180722171-1035491697.png
[600165-20170121180731562-316920662.png]: /images/20220418/d9cc55662ed640a78f33d3700d4bad17.png
[600165-20170121181659734-1035365203.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121181659734-1035365203.png
[600165-20170121181708390-1994007685.png]: /images/20220418/be2c356fe6a3464498babd32e0c9033c.png
[600165-20170121182158531-1522139664.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121182158531-1522139664.png
[600165-20170121182206671-1837073264.png]: /images/20220418/864a417eced64b4585b388af0229f1d4.png
[600165-20170121182852468-1462512454.png]: /images/20220418/7751327ef16447e7b5d0c5bb57fb7d7c.png
[600165-20170121183435890-1350949010.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121183435890-1350949010.png
[600165-20170121183445640-1750855701.png]: /images/20220418/e0f7dd1150a94c46a0bd1764601531b6.png
[600165-20170121185054312-549083784.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121185054312-549083784.png
[600165-20170121185106031-1426410254.png]: /images/20220418/749e9b9b550548dbb665cc8805c041e0.png
[600165-20170121190316875-1459932813.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121190316875-1459932813.png
[600165-20170121190325703-1235022505.png]: /images/20220418/96142432c6184287a0267783eaba19bf.png
[600165-20170121190613718-1073029883.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121190613718-1073029883.png
[600165-20170121190635656-1896064058.png]: /images/20220418/0d4fe83a765344589c0a0df87c4611fe.png
[600165-20170121192302156-105192980.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121192302156-105192980.png
[600165-20170121192312453-411896732.png]: /images/20220418/7b6f88b3bac441cb91b8c9f0fb036541.png
[600165-20170121193336406-237336360.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121193336406-237336360.png
[600165-20170121193346781-1402792187.png]: /images/20220418/cae1280b05d44898ad4c3bcf127ee079.png
[600165-20170121193837156-99120890.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121193837156-99120890.png
[600165-20170121193847093-1553208687.png]: /images/20220418/1c86b58e629f4456b0c4d8661435a717.png
[600165-20170121194131015-499064556.png]: https://images2015.cnblogs.com/blog/600165/201701/600165-20170121194131015-499064556.png
[600165-20170121194138656-989711852.png]: /images/20220418/fd1af53954714b84a9e19a929ef26a73.png
[http_www.appinn.com_markdown]: http://www.appinn.com/markdown/
[http_sspai.com_25137]: http://sspai.com/25137