Markdown 语法

Markdown指南

Markdown是一种轻量级的易用的书写语法。本文是Markdown的一个快速指南[1]

什么是Markdown?

Markdown是一种通过少量简单的标记字符来格式化文本的方法。您可以用纯文本来书写文档,然后在阅读时呈现一个美观的排版。

其实并没有一个标准的Markdown语法,很多编辑器都会添加自己的扩展语法。不同于此,为了兼容性,VNote仅仅支持那些被广泛使用的基本语法。

如何上手Markdown?

如果您是刚接触Markdown,那么比较好的一个方法是逐个学习Markdown语法。刚开始,懂得标题和强调语法就能够写出基本的文档;然后,每天可以学习一个新的语法并不断练习。

语法指南

下面是VNote支持的Markdown语法的一个概览。

标题

# This is an <h1> tag
## This is an <h2> tag
###### This is an <h6> tag

注意

  • #之后需要至少一个空格;
  • 一个标题应该占一整行;

强调

*This text will be italic*  
_This text will be italic_  

**This text will be bold**  
__This text will be bold__

注意

  • VNote推荐使用*
  • 如果渲染错误,请尝试在第一个*之前以及最后一个*之后添加一个空格。如果被标记的文本是以全角符号开始或结尾,一般都需要前后添加一个空格;
  • VNote提供快捷键Ctrl+ICtrl+B来插入斜体和粗体;

列表

无序列表

* Item 1  
只是一段在Item 1下面的文字。需要注意上面一行结尾有两个空格。
* Item 2
    * Item 2a
    * Item 2b
* Item 3

使用一个空行来来结束一个列表。

有序列表

1. Item 1
1. Item 2  
注意,列表前面的序号其实是无关紧要的,渲染时Markdown会自动修改该序号。
3. Item 3
    1. Item 3a
    2. Item 3b
4. Item 4

表格

| col 1 | col 2 | col 3 |
| --- | --- | --- |
| cell1 | cell2 | cell3 |
| cell4 | cell5 | cell6 |

图片和链接

![Image Alt Text](/url/to/image.png "Optional Text")

![Image Alt Text](/url/to/image.png "Image specified with width and height" =800x600)

![Image Alt Text](/url/to/image.png =800x600)

![Image Alt Text](/url/to/image.png "Image specified with width" =800x)

![Image Alt Text](/url/to/image.png "Image specified with height" =x600)

[Link Text](/url/of/the/link)

注意

  • VNote不推荐使用参考式的图片链接。VNote不会预览这些图片。
  • 声明图片尺寸只在 markdown-it 中支持。

块引用

As VNote suggests:

> VNote is the best Markdown note-taking application
> ever.  
>
> THere is two spaces after `ever.` above to insert a
> new line.

注意

  • >标记后面需要至少一个空格;
  • 多行连续的引用可以只在第一行添加标记;

代码块

```lang
This is a fenced code block.
```

~~~
This is another fenced code block.
~~~

注意

  • lang用于指定代码块的代码语言,可选;如果不指定,VNote不会尝试高亮代码;

图表

需要在Markdown菜单中启用Flowchart.js或Mermaid或WaveDrom,并重新打开当前标签页。

VNote支持使用以下引擎来绘制图表。您需要使用代码块,并标明特定语言,然后在代码块里面定义图表。

例如,

```flowchart
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
```

UML

需要在设置中启用PlantUML。如果使用在线的PlantUML服务器,请注意隐私问题;如果使用本地PlantUML,可能需要安装Java运行时、PlantUML以及Graphviz。

VNote支持 PlantUML 来实现UML图表。您需要使用代码块,并标明语言为puml,然后在代码块里面定义图表。

```puml
@startuml
Bob -> Alice : hello
@enduml
```

Graphviz

需要在设置中启用Graphviz。

VNote支持 Graphviz 来绘制图表。您需要使用代码块,并标明语言为dot,然后在代码块里面定义图表。

数学公式

需要在Markdown菜单中启用MathJax,并重启VNote。

VNote通过 MathJax 来支持数学公式。默认的块公式的分隔符是$$...$$行内公式的分隔符是$...$

  • 行内公式不能跨多行;
  • 形如3$abc$/$abc$4/$ abc$$abc $的不会被解析为公式;
  • 使用\转义$
  • 开始的$$之前以及结束的$$之后都只允许出现空格字符;

VNote也可以使用标明语言mathjax的代码块来实现块公式。

```mathjax
$$
J(\theta) = \frac 1 2 \sum_{i=1}^m (h_\theta(x^{(i)})-y^{(i)})^2
$$
```

块公式支持公式序号:

$$vnote x markdown = awesome$$ (1.2.1)

行内代码

Here is a `inline code`.

如果想输入一个 `,需要使用两个 ` 来括住它,例如 `` ` ``。 要输入两个 `,则需要使用三个 `

删除线

Here is a ~~text~~ with strikethrough.

注意

  • VNote提供快捷键Ctrl+D来插入带有删除线的文本;

任务列表

- [x] this is a complete item.
- [ ] this is an incomplete item.

脚注

This is a footnote [^1].

[^1]: Here is the detail of the footnote.

上标和下标

需要在Markdown菜单中启用上标和下标并使用Markdown-it渲染引擎。

This is the 1^st^ superscript.

This is the H~2~O subscript.

警告

使用Markdown-it渲染引擎时,可以添加警告信息。

::: alert-info

这是一个信息文本。

:::

::: alert-danger

这是一个危险文本。

:::

可用的一些警告形式如下:

alert-primary
alert-secondary
alert-success
alert-info
alert-warning
alert-danger
alert-light
alert-dark

换行和段落

如果需要换行,您应该在当前行末尾添加两个空格,然后换行。VNote提供快捷键Shift+Enter来辅助用户输入两个空格并换行。

如果需要一个新的段落,您应该先插入一个空行然后才输入新的段落的文本。

一般来说,您应该在一个块元素(例如代码块、列表和块引用)后面插入一个空行来显式结束该元素。


  1. 该指南参考了 Mastering Markdown.

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

推荐阅读更多精彩内容