Markdown是一个轻量级的文本标记语言,通过简单直观的语法,追求编辑时的酣畅淋漓和阅读时的美观大方。MD设计的初衷主要为以下三点:
- 纯文本的文件易于保存和传输,跨平台支持好;
- 通过一些有意义的标记,使得纯文本的阅读也直观明了,如
**
表示着重、加粗; - 通过简单的语法标记来输出美观的排版和样式。
MD最近越来越流行,对于程序员群体,更是近乎“标配”。对于排版样式要求不高的场景,配合合适的软件,MD用起来的确比平时的富文本要来的酸爽!
很多人刚开始认识MD的时候,第一感觉估计是:写个文档都这么折腾,还需要记啥语法,我小白一个可不大懂。好不容易鼓起勇气尝试,却可能因为MD的一些坑坑洼洼而不断受挫。
本人重度使用MD已经有四五年了,在这方面尝试了很多,也总结了自己的一些经验。本文将会分享一些MD方面的小知识和使用经验,希望能帮助大家。其中错漏欠缺之处,也恳请大家不吝斧正,互相交流。
语法
MD刚出来的时候,其实是作为一个实现上的标准,而不是一个文档的标准。因此,和其他语言不一样,MD其实是没有一个语法标准的。这是因为MD是由一个程序员想出来的,然后程序员说搞就搞,三两下就实现了一个将MD转为HTML排版的渲染引擎,然后告诉大家这就是MD。
后面大家觉得这样的确方便,所以也自己实现了一个引擎。这些不同的实现,虽然大体都差不多,但某些细小的地方就有各个作者的不同考虑。
目前,MD语法还是没有一个统一的标准,但是有一些比较流行的实现标准,如GFM和CommonMark。有人专门弄了一个在线网站展示各种流行渲染引擎的效果;不过网址一时忘了,只能有缘再见啦~
所以,不同的编辑器可能使用不同的渲染引擎来将MD文档进行渲染排版,从而可能会有不同的效果。这是MD很多坑的源头。使用的时候,大家要留意。
软件
支持MD的软件很多,这里大概分为两类吧:
- 编辑器
- 笔记软件
其中,流行的MD编辑器目前有很多。顾名思义,该类软件大概就是一个对MD语法有一些额外支持的文本编辑器。也可以进一步细分为离线和在线两种。比较流行的如MarkdownPad, StackEdit, CMD作业部落等等,这里就不一一贴链接了,有兴趣的自行搜索一下也就“手到擒来”了。另外,也有部分程序员觉得应该将写代码和写笔记两项运动结合在一起做,于是使用一些代码编辑器来编辑MD笔记,如Vim, SublimeText, Atom等等。如果对这方面感兴趣,可以参考Vim与Markdown,实现键不离手这篇文章。
MD编辑器虽然能够提供足够溜的编辑体验,但是笔记管理之类的功能则稍微鸡肋,一旦笔记多了以后,往往就容易让人怀念一个普通的笔记软件了。笔记软件当然也有支持MD的啦,如有道云笔记、为知笔记等等。一般这些软件都会提供编辑和阅读两种模式,编辑的时候是纯文本,阅读的时候则展示渲染后的效果。这样,既有全面的笔记管理功能,也支持MD渲染。到此,好像一切都完美了。然而,很多笔记软件提供的编辑体验却是远远落后于一些MD编辑器软件的。
那么,问题来了,有没有提供一级棒的MD编辑体验的笔记软件呢?还真的有:
震惊!最舒适的Markdown笔记软件竟是它
VNote: 一个舒适的Markdown笔记软件
VNote目前支持三种渲染引擎:Hoedown, Marked和Markdown-it。后面将会使用VNote辅助讲讲MD的一些具体的坑。
相对于 所见即所得,MD天生就是编辑和阅读两个样儿。目前大多数会采用两种方式来处理这种与生俱来的割裂感:
- 不闻不问
完全不管,类似于普通富文本编辑一样进行处理。 - 实时预览
将屏幕一分为二,一边编辑,一边预览渲染后的效果。这种方法有以下几点不好:
- 眼珠子左右顾盼;
- 屏幕相对变窄了;
- 经常需要分心将两边的内容对照起来。
当然,还有一种以Typora为代表的将MD实时渲染为富文本的做法。个人觉得,这种方法矫枉过正,和MD的设计理念背道而驰。
VNote采用相对折中的方案:
- 通过MD语法高亮帮助用户在编辑时追踪文章脉络;
- 编辑时实时预览图片;
如下是写这篇文章的时候,简书编辑器的一个效果:
对应在VNote中的效果:
标题
标题的语法就比较简单啦,多个#
后面一个空格,然后是标题的内容。但是,当标题遇上下划线,那么就有点小问题了。
直接上图说明。
渲染前的文本如下:
# Simple Title
# Title with **Bold**
# Title with *Italic*
# Title with_Dash_
# Title with `code`
三个不同引擎渲染的效果分别如下:
可见,只有Markdown-it的下划线是没有被“吃”掉的。标题中出现下划线的场景还是很常见的,特别是对于程序员而言,比如某个函数名字。
列表
列表分为无序列表和有序列表。当需要嵌套列表,或者在列表中插入代码块之类的时候,也是比较多坑的。
列表末尾空两格换行
写列表的时候,我们往往很容易写出这样的列表。
1. First
This is the first item in the list.
2. Second
This is the second item in the list.
渲染出来,感觉就不是那么回事了:
我们还需要在每个列表序号所在行后面添加至少两个空格,告诉MD引擎“在这需要换行”:
这时候就差不多了:
嵌套列表缩进四个空格
嵌套列表的写法如下:
1. First
2. Second
- Unordered list first
Description text in the nested list.
- Unordered list second
3. Third
渲染后的结果如下(注意第三行末尾有两个空格哦):
列表中插入图片
如下:
1. First
![Image](https://github.com/tamlok/vnote/raw/master/screenshots/vnote.png)
2. Second
- Unordered list first
Description text in the nested list.
- Unordered list second
![Image in Nested List](https://github.com/tamlok/vnote/raw/master/screenshots/vnote.png)
3. Third
注意第二幅图片的缩进,以及每幅图片前的那一行的末尾两个空格。
列表中插入代码块
这个就有点复杂了,我只能说说我自己的一个解决方法。
如下的MD文本:
注意代码块每一行都必须缩进,而有些引擎要求代码块前必须空一行。渲染后如下:
一个错误的例子:
渲染后,代码块会与列表处于同一个等级:
关于列表的其他
- 有序列表的序号其实并不重要,渲染后会自动排序计数。
- 需要嵌套列表时,推荐多使用无序列表,只使用一次有序列表。因为不同层级的无序列表前面的符号标记是不一样的,而不同层级的有序列表都是使用简单的一个数字。
- 列表嵌套的层数不宜过多,否则迟早会痴线的。一般以3层为宜,如果需要更深层级的嵌套,可以考虑是否能把顶级的列表转为标题层级。
代码
代码比较简单,如下:
渲染后效果如下:
需要提出来的几点:
- 两种形式的代码块都是可以的,但是我觉得第一种比较方便;
- 第一种形式可以通过在
```
之后指定高亮的语言,如cpp
;而第二种形式也是可以指定语言的,但貌似比较麻烦;从渲染的效果来看,使用第二种形式时,VNote所用的引擎无法语法高亮。 - 第二种形式中,注意代码块最后最好换行,如紫色那一行所示。
- 编辑的时候,这两种形式的表现不一样是因为VNote目前只支持第一种形式的代码块编辑时语法高亮。
- 对于 行内代码,如果需要输入反引号,则可以使用两个反引号作为标记,如
`` ` ``
;以此类推。
图片
图片就比较简单了。一般有两种方式:
- 上传图片到网上(如图床之类),获取图片的URL地址;
- 使用本地图片,可以使用绝对路径或相对于MD文件的相对路径;
一个例子:
此时,该图片是保存于与MD文件同一个目录下的images/
目录下。注意,该图片是直接从剪切板粘贴到VNote中,由VNote自动插入的。VNote会帮用户自动保存图片到相应的一个目录下,并提供编辑时实时预览图片。
表格
表格是MD的一个硬伤,因为在MD里面插入一个表格基本上等同于要求用户手动输入表格边框。
| Column 1 | Column 2 | Column 3 |
| --- | --- | --- |
| Data 1 containing \| | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
渲染如下:
注意以下几点:
-
| --- | --- |
一行可以添加:
来表示对齐方式,如左对齐| :--- | :--- |
; - 如果表格中需要出现
|
,则 部分 渲染引擎允许通过\|
转义的方式来输入|
,如上图所示;
其他
任务列表
部分引擎支持任务列表,如下:
- [ ] Undone;
- [x] Done;
- [x] Done;
大纲
部分引擎支持[TOC]
语法显示文章的大纲。当然,VNote在编辑和阅读的时候都支持一个更具交互性的大纲,所以[TOC]
目前我比较少用。
流程图和数学公式
部分引擎支持流程图和数学公式。VNote通过Mermaid和MathJax来分别支持流程图和数学公式。个人的意见是,公式可以有,流程图很多时候就不必了。
渲染效果如下:
总结
以上就是一些个人在使用Markdown过程中的经验,希望对你有帮助~~
珍爱生命,使用Markdown,多用空行
舒适生活,使用VNote,少些折腾