Appendix A — Markdown 速查表

A.1 概述

MarkdownDaring Fireball 创建;原始指南在这里。然而,其语法在不同的解析器或编辑器之间可能有所不同。Typora 使用 GitHub 风格的 Markdown

A.2 块级元素

A.2.1 段落和换行

段落是由一行或多行连续的文本组成。在 markdown 源代码中,段落之间需要用两个或更多空行分隔。在 Typora 中,只需要一个空行(按一次Return键)就可以创建新段落。

Shift + Return 可以创建单行换行。大多数其他 markdown 解析器会忽略单行换行,因此为了让其他 markdown 解析器识别你的换行,你可以在行尾留下两个空格,或插入 <br/>

A.2.2 标题

标题使用 1-6 个井号(#)字符在行首,对应 1-6 级标题。例如:

# 这是一级标题

## 这是二级标题

###### 这是六级标题

在 Typora 中,输入 ‘#’ 后跟标题内容,按 Return 键即可创建标题。

A.2.3 引用块

Markdown 使用类似电子邮件的 > 字符进行块引用。显示如下:

> 这是包含两个段落的引用块。这是第一段。
>
> 这是第二段。Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.



> 这是另一个只有一段的引用块。使用三个空行来分隔两个引用块。

在 Typora 中,输入 ‘>’ 后跟引用内容将生成引用块。Typora 会为你自动插入适当的 ‘>’ 或换行。通过添加额外的 ‘>’ 层级可以创建嵌套引用块(引用块中的引用块)。

A.2.4 列表

输入 * 列表项目 1 将创建无序列表 - * 符号可以替换为 +-

输入 1. 列表项目 1 将创建有序列表 - 它们的 markdown 源代码如下:

## 无序列表
*   红色
*   绿色
*   蓝色

## 有序列表
1.  红色
2.  绿色
3.  蓝色

A.2.5 任务列表

任务列表是带有 [ ] 或 [x](未完成或已完成)标记的列表项。例如:

- [ ] 一个任务列表项
- [ ] 需要列表语法
- [ ] 支持普通**格式化**,@提及,#1234 引用
- [ ] 未完成
- [x] 已完成

你可以通过点击项目前的复选框来改变完成/未完成状态。

A.2.6 (围栏式)代码块

Typora 仅支持 GitHub 风格 Markdown 中的围栏式代码块。不支持原始 markdown 中的代码块。

使用围栏很简单:输入 ``` 并按 return。在 ``` 后添加可选的语言标识符,我们将通过语法高亮显示它:

这里是一个例子:

```js
function test() {
  console.log("注意这个函数前面的空行?");
}
```

语法高亮:
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

A.2.7 数学公式块

你可以使用 MathJax 渲染 LaTeX 数学表达式。

要添加数学表达式,输入 $$ 并按 ‘Return’ 键。这将触发一个接受 Tex/LaTex 源代码的输入字段。例如:

\[ \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix} \]

在 markdown 源文件中,数学公式块是由一对 ‘$$’ 标记包围的 LaTeX 表达式:

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$

你可以在这里找到更多详情。

A.2.8 表格

输入 | 第一个表头 | 第二个表头 | 并按 return 键。这将创建一个两列的表格。

创建表格后,将焦点放在表格上会打开表格工具栏,你可以调整大小、对齐或删除表格。你还可以使用上下文菜单复制和添加/删除单个列/行。

表格的完整语法如下所示,但不需要详细了解完整语法,因为 Typora 会自动生成表格的 markdown 源代码:

| 第一个表头  | 第二个表头 |
| ------------- | ------------- |
| 内容单元格  | 内容单元格  |
| 内容单元格  | 内容单元格  |

你还可以在表格中包含内联 Markdown,如链接、粗体、斜体或删除线。

最后,通过在表头行中包含冒号(:),你可以定义该列中的文本为左对齐、右对齐或居中对齐:

| 左对齐  | 居中对齐  | 右对齐 |
| :------------ |:---------------:| -----:|
| 第3列是      | 一些很长的文字 | $1600 |
| 第2列是      | 居中的        |   $12 |
| 斑马条纹     | 很整洁        |    $1 |

最左边的冒号表示左对齐列;最右边的冒号表示右对齐列;两边都有冒号表示居中对齐列。

A.2.9 脚注

你可以像这样创建脚注[^脚注]

[^脚注]: 这里是脚注的*文本*内容。

将产生:

你可以像这样创建脚注1

将鼠标悬停在”脚注”上标上可以查看脚注内容。

A.2.10 水平分割线

在空行上输入 ***--- 并按 return 将绘制一条水平线。


A.2.11 YAML Front Matter

Typora 现在支持 YAML Front Matter。在文章顶部输入 --- 然后按 Return 键来引入元数据块。或者,你可以从 Typora 的顶部菜单插入元数据块。

A.2.12 目录 (TOC)

输入 [toc] 并按 Return 键。这将创建一个”目录”部分。TOC 从文档中提取所有标题,其内容会随着你向文档添加内容而自动更新。

A.3 行内元素

行内元素在输入后会立即被解析和渲染。将光标移动到这些行内元素中间会将它们展开为 markdown 源代码。以下是每个行内元素的语法说明。

A.3.1 链接

Markdown 支持两种链接样式:内联和引用。

在这两种样式中,链接文本都用[方括号]括起来。

要创建内联链接,在链接文本的右方括号后立即使用一组常规括号。在括号内,放入你想要链接指向的 URL,以及可选的用引号括起来的链接标题。例如:

这是[一个示例](http://example.com/ "标题")内联链接。

[这个链接](http://example.net/)没有标题属性。

将产生:

这是一个示例内联链接。(<p>这是 <a href="http://example.com/" title="标题">)

这个链接没有标题属性。(<p><a href="http://example.net/">这个链接</a> 没有)

A.3.1.1 内部链接

你可以将 href 设置为标题,这将创建一个书签,允许你点击后跳转到该部分。例如:

Command(在 Windows 上:Ctrl) + 点击这个链接将跳转到”块级元素”标题。要查看如何编写,请按住 键移动光标或点击该链接以展开为 markdown 源代码。

A.3.1.2 引用链接

引用式链接使用第二组方括号,在其中放置你选择的标签来标识该链接:

这是[一个示例][id]引用式链接。

然后,在文档的任何地方,你可以像这样定义你的链接标签:

[id]: http://example.com/  "可选标题"

在 Typora 中,它们将被渲染为:

这是一个示例引用式链接。

隐式链接名称快捷方式允许你省略链接的名称,这种情况下链接文本本身将用作名称。只需使用一组空的方括号 — 例如,要将单词”Google”链接到 google.com 网站,你只需写:

[Google][]
然后定义链接:

[Google]: http://google.com/

在 Typora 中,点击链接将展开它以进行编辑,command+点击将在网络浏览器中打开超链接。

A.3.2 URL

Typora 允许你插入 URL 作为链接,用 <尖括号> 括起来。

<i@typora.io> 变成

Typora 还会自动链接标准 URL。例如:www.google.com。

A.3.3 图片

图片的语法与链接类似,但需要在链接开始前添加一个 ! 字符。插入图片的语法如下:

![替代文本](/path/to/img.jpg)

![替代文本](/path/to/img.jpg "可选标题")

你可以使用拖放来从图片文件或网络浏览器插入图片。通过点击图片,你可以修改 markdown 源代码。如果使用拖放添加的图片与当前编辑的文档在同一目录或子目录中,将使用相对路径。

如果你使用 markdown 来构建网站,你可以在 YAML Front Matter 中使用 typora-root-url 属性为本地计算机上的图片预览指定 URL 前缀。例如,在 YAML Front Matter 中输入 typora-root-url:/User/Abner/Website/typora.io/,然后 ![alt](/blog/img/test.png) 将在 Typora 中被视为 ![alt](file:///User/Abner/Website/typora.io/blog/img/test.png)

你可以在这里找到更多详情。

A.3.4 强调

Markdown 将星号(*)和下划线(_)视为强调的标记。用一个 *_ 包围的文本将被包装在 HTML <em> 标签中。例如:

*单个星号*

_单个下划线_

输出:

单个星号

单个下划线

GFM 会忽略单词中的下划线,这在代码和名称中很常见,比如:

wow_great_stuff

do_this_and_do_that_and_another_thing.

要在原本会被用作强调分隔符的位置产生字面意义上的星号或下划线,你可以用反斜杠转义:

\*这段文字被字面意义上的星号包围\*

Typora 推荐使用 * 符号。

A.3.5 加粗

双重的 *_ 会导致其包含的内容被包装在 HTML <strong> 标签中,例如:

**双星号**

__双下划线__

输出:

双星号

双下划线

Typora 推荐使用 ** 符号。

A.3.6 代码

要标示一个行内代码段,用反引号(`)包围它。与预格式化的代码块不同,代码段表示正常段落中的代码。例如:

使用 `printf()` 函数。

将产生:

使用 printf() 函数。

A.3.7 删除线

GFM 添加了创建删除线文本的语法,这在标准 Markdown 中是缺失的。

~~wrong text~~ 变成 wrong text

A.3.8 下划线

下划线通过原始 HTML 实现。

<u>underline</u> 变成 underline

A.3.9 表情符号 :smile:

使用语法 :smile: 输入表情符号。

用户可以通过按 ESC 键触发表情符号的自动完成建议,或在偏好设置面板中启用后自动触发它。此外,通过菜单栏中的 编辑 -> 表情符号与符号(macOS)也支持直接输入 UTF-8 表情符号字符。

A.3.10 行内数学公式

要使用此功能,请先在 偏好设置 面板 -> Markdown 标签中启用它。然后,使用 $ 包围 TeX 命令。例如:$\lim_{x \to \infty} \exp(-x) = 0$ 将被渲染为 LaTeX 命令。

要触发行内数学公式的预览:输入 “$”,然后按 ESC 键,再输入 TeX 命令。

你可以在这里找到更多详情。

A.3.11 下标

要使用此功能,请先在 偏好设置 面板 -> Markdown 标签中启用它。然后,使用 ~ 包围下标内容。例如:H~2~OX~long\ text~

A.3.12 上标

要使用此功能,请先在 偏好设置 面板 -> Markdown 标签中启用它。然后,使用 ^ 包围上标内容。例如:X^2^

A.3.13 高亮

要使用此功能,请先在 偏好设置 面板 -> Markdown 标签中启用它。然后,使用 == 包围高亮内容。例如:==高亮==

A.4 HTML

你可以使用 HTML 来设置纯 Markdown 不支持的内容样式。例如,使用 <span style="color:red">这段文字是红色的</span> 来添加红色文字。

A.4.1 嵌入内容

一些网站提供基于 iframe 的嵌入代码,你也可以将其粘贴到 Typora 中。例如:

<iframe height='265' scrolling='no' title='Fancy Animated SVG Menu' src='http://codepen.io/jeangontijo/embed/OxVywj/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

A.4.2 视频

你可以使用 HTML 的 <video> 标签来嵌入视频。例如:

<video src="xxx.mp4" />

A.4.3 其他 HTML 支持

你可以在这里找到更多详情。


  1. 这里是脚注的文本内容。↩︎