一踩一个准之Markdown

Markdown是一个轻量级的文本标记语言,通过简单直观的语法,追求编辑时的酣畅淋漓和阅读时的美观大方。MD设计的初衷主要为以下三点:

  1. 纯文本的文件易于保存和传输,跨平台支持好;
  2. 通过一些有意义的标记,使得纯文本的阅读也直观明了,如**表示着重、加粗;
  3. 通过简单的语法标记来输出美观的排版和样式。
Markdown

MD最近越来越流行,对于程序员群体,更是近乎“标配”。对于排版样式要求不高的场景,配合合适的软件,MD用起来的确比平时的富文本要来的酸爽!

很多人刚开始认识MD的时候,第一感觉估计是:写个文档都这么折腾,还需要记啥语法,我小白一个可不大懂。好不容易鼓起勇气尝试,却可能因为MD的一些坑坑洼洼而不断受挫。

本人重度使用MD已经有四五年了,在这方面尝试了很多,也总结了自己的一些经验。本文将会分享一些MD方面的小知识和使用经验,希望能帮助大家。其中错漏欠缺之处,也恳请大家不吝斧正,互相交流。

语法

MD刚出来的时候,其实是作为一个实现上的标准,而不是一个文档的标准。因此,和其他语言不一样,MD其实是没有一个语法标准的。这是因为MD是由一个程序员想出来的,然后程序员说搞就搞,三两下就实现了一个将MD转为HTML排版的渲染引擎,然后告诉大家这就是MD。

后面大家觉得这样的确方便,所以也自己实现了一个引擎。这些不同的实现,虽然大体都差不多,但某些细小的地方就有各个作者的不同考虑。

目前,MD语法还是没有一个统一的标准,但是有一些比较流行的实现标准,如GFMCommonMark。有人专门弄了一个在线网站展示各种流行渲染引擎的效果;不过网址一时忘了,只能有缘再见啦~

所以,不同的编辑器可能使用不同的渲染引擎来将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天生就是编辑和阅读两个样儿。目前大多数会采用两种方式来处理这种与生俱来的割裂感:

  1. 不闻不问
    完全不管,类似于普通富文本编辑一样进行处理。
  2. 实时预览
    将屏幕一分为二,一边编辑,一边预览渲染后的效果。这种方法有以下几点不好:
  • 眼珠子左右顾盼;
  • 屏幕相对变窄了;
  • 经常需要分心将两边的内容对照起来。

当然,还有一种以Typora为代表的将MD实时渲染为富文本的做法。个人觉得,这种方法矫枉过正,和MD的设计理念背道而驰。

VNote采用相对折中的方案:

  • 通过MD语法高亮帮助用户在编辑时追踪文章脉络;
  • 编辑时实时预览图片;

如下是写这篇文章的时候,简书编辑器的一个效果:

JianShu Edit

对应在VNote中的效果:

VNote Edit

标题

标题的语法就比较简单啦,多个#后面一个空格,然后是标题的内容。但是,当标题遇上下划线,那么就有点小问题了。

直接上图说明。

渲染前的文本如下:

# Simple Title

# Title with **Bold**

# Title with *Italic*

# Title with_Dash_

# Title with `code`

三个不同引擎渲染的效果分别如下:

Hoedown
Marked
Markdown-it

可见,只有Markdown-it的下划线是没有被“吃”掉的。标题中出现下划线的场景还是很常见的,特别是对于程序员而言,比如某个函数名字。

列表

列表分为无序列表和有序列表。当需要嵌套列表,或者在列表中插入代码块之类的时候,也是比较多坑的。

列表末尾空两格换行

写列表的时候,我们往往很容易写出这样的列表。

1. First
This is the first item in the list.
2. Second
This is the second item in the list.

渲染出来,感觉就不是那么回事了:

List Without Trailing Spaces

我们还需要在每个列表序号所在行后面添加至少两个空格,告诉MD引擎“在这需要换行”:

Text with Trailing Spaces

这时候就差不多了:

List With Trailing Spaces

嵌套列表缩进四个空格

嵌套列表的写法如下:

1. First
2. Second
    - Unordered list first    
    Description text in the nested list.
    - Unordered list second
3. Third

渲染后的结果如下(注意第三行末尾有两个空格哦):

Nested List

列表中插入图片

如下:

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

注意第二幅图片的缩进,以及每幅图片前的那一行的末尾两个空格。

Image in List

列表中插入代码块

这个就有点复杂了,我只能说说我自己的一个解决方法。

如下的MD文本:

MD Text with Code Block Within List

注意代码块每一行都必须缩进,而有些引擎要求代码块前必须空一行。渲染后如下:

Code Block Within List

一个错误的例子:

Wrong MD Text With Code Block Within List

渲染后,代码块会与列表处于同一个等级:

Wrong Code Block Within List

关于列表的其他

  1. 有序列表的序号其实并不重要,渲染后会自动排序计数。
  2. 需要嵌套列表时,推荐多使用无序列表,只使用一次有序列表。因为不同层级的无序列表前面的符号标记是不一样的,而不同层级的有序列表都是使用简单的一个数字。
  3. 列表嵌套的层数不宜过多,否则迟早会痴线的。一般以3层为宜,如果需要更深层级的嵌套,可以考虑是否能把顶级的列表转为标题层级。

代码

代码比较简单,如下:

Text With Code Blocks

渲染后效果如下:

Code Blocks

需要提出来的几点:

  1. 两种形式的代码块都是可以的,但是我觉得第一种比较方便;
  2. 第一种形式可以通过在```之后指定高亮的语言,如cpp;而第二种形式也是可以指定语言的,但貌似比较麻烦;从渲染的效果来看,使用第二种形式时,VNote所用的引擎无法语法高亮。
  3. 第二种形式中,注意代码块最后最好换行,如紫色那一行所示。
  4. 编辑的时候,这两种形式的表现不一样是因为VNote目前只支持第一种形式的代码块编辑时语法高亮。
  5. 对于 行内代码,如果需要输入反引号,则可以使用两个反引号作为标记,如`` ` ``;以此类推。

图片

图片就比较简单了。一般有两种方式:

  1. 上传图片到网上(如图床之类),获取图片的URL地址;
  2. 使用本地图片,可以使用绝对路径或相对于MD文件的相对路径;

一个例子:

Local Images

此时,该图片是保存于与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 |

渲染如下:

Sheet

注意以下几点:

  1. | --- | --- | 一行可以添加:来表示对齐方式,如左对齐 | :--- | :--- |
  2. 如果表格中需要出现|,则 部分 渲染引擎允许通过\|转义的方式来输入|,如上图所示;

其他

任务列表

部分引擎支持任务列表,如下:

- [ ] Undone;
- [x] Done;
- [x] Done;
Task List

大纲

部分引擎支持[TOC]语法显示文章的大纲。当然,VNote在编辑和阅读的时候都支持一个更具交互性的大纲,所以[TOC]目前我比较少用。

VNote Outline

流程图和数学公式

部分引擎支持流程图和数学公式。VNote通过Mermaid和MathJax来分别支持流程图和数学公式。个人的意见是,公式可以有,流程图很多时候就不必了。

MD Text with Diagram and Math

渲染效果如下:

Diagram and Math

总结

以上就是一些个人在使用Markdown过程中的经验,希望对你有帮助~~

珍爱生命,使用Markdown,多用空行
舒适生活,使用VNote,少些折腾

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,566评论 25 707
  • 调研了一下目前的路由框架,ARouter(阿里的),ActivityRouter都使用了apt技术 编译时注解,个...
    breaktian阅读 520评论 0 0
  • 当我发现那个并不起眼常常被我们视而不见的筷子并且被筷子的文化所折服的时候,我已经三十五岁结婚十多年了,我经历着外面...
    福雅阅读 389评论 0 0
  • 天空雾蒙蒙的,在上班路上,耳朵里塞着耳机,不知道唱的是什么,心情不好不坏,想想我的生活,就像是这天空一样,选择远嫁...
    健康快乐解靠解靠阅读 94评论 0 0