【Tools】MarkDown教程(七)-Typora详细教程

    技术2026-02-24  13

    00. 目录

    文章目录

    00. 目录01. Markdown简介02. Typora下载03. 常用快捷键04. 块元素-换行符05. 块元素-标题级别06. 块元素-引用文字07. 块元素-无序列表08. 块元素-有序列表09. 块元素-任务列表10. 块元素-代码块11. 块元素-数学表达式12. 块元素-表格13. 块元素-脚注14. 块元素-水平线15. 块元素-YAML Front Matter16. 块元素-目录[toc]17. 跨度元素18. 跨度元素-内部链接19. 跨度元素-参考链接20. 跨度元素-网址21. 跨度元素-图片22. 跨度元素-斜体23. 跨度元素-加粗24. 跨度元素-加粗斜体25. 跨度元素-代码标记26. 跨度元素-删除线27. 跨度元素-下划线28. 跨度元素-表情符号29. 跨度元素-内联公式30. 跨度元素-下标31. 跨度元素-上标32. 跨度元素-高亮33. 跨度元素-HTML34. 跨度元素-嵌入内容35. 跨度元素-视频36. 跨度元素-换行符37. 转义38. 总结39. 附录

    01. Markdown简介

    Typora是一款轻便简洁的Markdown编辑器,支持即时渲染技术,这也是与其他Markdown编辑器最显著的区别。即时渲染使得你写Markdown就想是写Word文档一样流畅自如,不像其他编辑器的有编辑栏和显示栏。

    Typora删除了预览窗口,以及所有其他不必要的干扰。取而代之的是实时预览。Markdown的语法因不同的解析器或编辑器而异,Typora使用的是GitHub Flavored Markdown。

    Typora 首先是一个 Markdown 文本编辑器,它支持且仅支持 Markdown 语法的文本编辑。在 Typora 官网 上他们将 Typora 描述为 「A truly minimal markdown editor. 」。

    Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。

    Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。

    Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。

    Markdown 编写的文档后缀为 .md, .markdown。

    02. Typora下载

    2.1 Typora官网下载

    下载:https://www.typora.io/

    2.2 高速下载

    下载:typora-setup-x64-20200701.rar

    03. 常用快捷键

    加粗: Ctrl + B标题: Ctrl + H插入链接: Ctrl + K插入代码: Ctrl + Shift + C – 无法执行行内代码: Ctrl + Shift + K插入图片: Ctrl + Shift + I无序列表:Ctrl + Shift + L – 无法执行撤销: Ctrl + Z一级标题: Ctrl + 1 – 以此类推 Typora快捷键整合 ​``` Ctrl+1 一阶标题 Ctrl+B 字体加粗 Ctrl+2 二阶标题 Ctrl+I 字体倾斜 Ctrl+3 三阶标题 Ctrl+U 下划线 Ctrl+4 四阶标题 Ctrl+Home 返回Typora顶部 Ctrl+5 五阶标题 Ctrl+End 返回Typora底部 Ctrl+6 六阶标题 Ctrl+T 创建表格 Ctrl+L 选中某句话 Ctrl+K 创建超链接 Ctrl+D 选中某个单词 Ctrl+F 搜索 Ctrl+E 选中相同格式的文字 Ctrl+H 搜索并替换 Alt+Shift+5 删除线 Ctrl+Shift+I 插入图片 Ctrl+Shift+M 公式块 Ctrl+Shift+Q 引用 注:一些实体符号需要在实体符号之前加”\”才能够显示 ​```

    04. 块元素-换行符

    在markdown中,段落由多个空格分隔。在Typora中,只需回车即可创建新段落。

    05. 块元素-标题级别

    # 一级标题 快捷键为 Ctrl + 1 ## 二级标题 快捷键为 Ctrl + 2 ...... ###### 六级标题 快捷键为 Ctrl + 6

    06. 块元素-引用文字

    > + 空格 + 引用文字

    07. 块元素-无序列表

    使用 * + - 都可以创建一个无序列表

    ## un-ordered list * Red * Green * Blue

    08. 块元素-有序列表

    使用 1. 2. 3. 创建有序列表

    ## ordered list 1. Red 2. Green 3. Blue

    09. 块元素-任务列表

    - [ ] 不勾选 - [x] 勾选

    - [ ] a task list item - [ ] list syntax required - [ ] normal **formatting**, @mentions, #1234 refs - [ ] incomplete - [x] completed

    10. 块元素-代码块

    在Typora中插入程序代码的方式有两种:使用反引号 `(~ 键)、使用缩进(Tab)。

    插入行内代码,即插入一个单词或者一句代码的情况,使用 code 这样的形式插入。插入多行代码输入3个反引号(`) + 回车,并在后面选择一个语言名称即可实现语法高亮。 Here's an example: ​``` function test() { console.log("notice the blank line before this function?"); } ​``` syntax highlighting: ​```ruby require 'redcarpet' markdown = Redcarpet.new("Hello World!") puts markdown.to_html ​```

    11. 块元素-数学表达式

    当你需要在编辑器中插入数学公式时,可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。根据需要加载 Mathjax 对数学公式进行渲染。

    按下 $$,然后按下回车键,即可进行数学公式的编辑。 V 1 × V 2 = ∣ i j k ∂ X ∂ u ∂ Y ∂ u 0 ∂ X ∂ v ∂ Y ∂ v 0 ∣ \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} V1×V2=iuXvXjuYvYk00

    $$ \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} $$

    12. 块元素-表格

    输入 | 表头1 | 表头2 |并回车。即可创建一个包含2列表。快捷键 Ctrl + T弹出对话框。

    First HeaderSecond HeaderContent CellContent CellContent CellContent Cell | First Header | Second Header | | ------------- | ------------- | | Content Cell | Content Cell | | Content Cell | Content Cell | 不管是哪种方式,第一行为表头,第二行为分割表头和主体部分,第三行开始每一行为一个表格行列与列之间用管道符号| 隔开还可设置对齐方式(表头与内容之间),如果不使用对齐标记,内容默认左对齐,表头居中对齐 左对齐 :|右对齐 |:中对齐 :|: 为了美观,可以使用空格对齐不同行的单元格,并在左右两侧都使用 | 来标记单元格边界为了使 Markdown 更清晰,| 和 - 两侧需要至少有一个空格(最左侧和最右侧的 | 外就不需要了)。 Left-AlignedCenter AlignedRight Alignedcol 3 issome wordy text$1600col 2 iscentered$12zebra stripesare neat$1 | Left-Aligned | Center Aligned | Right Aligned | | :------------ |:---------------:| -----:| | col 3 is | some wordy text | $1600 | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 |

    13. 块元素-脚注

    这个例子的脚注为1

    注意:该例子脚注标识是1,脚注标识可以为字母数字下划线,但是暂不支持中文。脚注内容可为任意字符,包括中文。

    You can create footnotes like this[^footnote]. [^footnote]: Here is the *text* of the **footnote**.

    14. 块元素-水平线

    输入 *** 或者 --- 再按回车即可绘制一条水平线,如下:



    *** ---

    15. 块元素-YAML Front Matter

    Typora支持YAML Front Matter, 在文章开头输入---,然后按回车即可。

    16. 块元素-目录[toc]

    输入 [ toc ] 然后回车,即可创建一个“目录”。TOC从文档中提取所有标题,其内容将自动更新。

    17. 跨度元素

    跨度元素即图片,网址,视频等,在Typora中输入后,会立即载入并呈现。

    18. 跨度元素-内部链接

    这是一个带有标题属性的 [链接](http://example.com/ "标题") 这是一个没有标题属性的 [链接](http://example.net/)

    这是一个带有标题属性的 链接 这是一个没有标题属性的 链接

    内部链接,跳转到指定的标题

    Command(on Windows: Ctrl) + Click [This link](#block-elements)

    [跳转到块元素-代码块](#10. 块元素-代码块)

    19. 跨度元素-参考链接

    这是一个[参考链接][id]。 [id]: http://example.com/ “可选标题”

    这是一个参考链接.

    20. 跨度元素-网址

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

    <i@typora.io> 将会成为 i@typora.io.

    Typora还会自动链接标准网址。

    www.baidu.com

    21. 跨度元素-图片

    ![显示的文字](C:\Users\Hider\Desktop\echart.png "图片标题") ![显示的文字](C:\Users\Hider\Desktop\echart.png)

    除了以上2种方式之外,还可以直接将图片拖拽进来,自动生成链接。

    22. 跨度元素-斜体

    使用 *单个星号* 或者 _单下划线_ 可以字体倾斜。快捷键 Ctrl + I

    *单个星号 * _单下划线 _

    单个星号 单下划线

    可以使用\转义*

    *this text is surrounded by literal asterisks*

    23. 跨度元素-加粗

    使用 **两个星号** 或者 __两个下划线__ 可以字体加粗。快捷键 Ctrl + B

    **double asterisks** __double underscores__

    显示效果:

    double asterisks

    double underscores

    24. 跨度元素-加粗斜体

    使用***加粗斜体***可以加粗斜体。

    `***加粗斜体***`

    加粗斜体

    25. 跨度元素-代码标记

    标记代码使用反引号,即在英文输入法下,ESC键下面和1键左边的符号。

    使用`printf`函数

    使用printf函数

    26. 跨度元素-删除线

    使用~~删除线~~ 快捷键 Alt + Shift + 5

    ~~删除线~~

    删除线

    27. 跨度元素-下划线

    通过<u>下划线的内容</u> 或者 快捷键Ctrl + U可实现下划线

    <u>下划线</u>

    下划线

    28. 跨度元素-表情符号

    Github的Markdown语法支持添加emoji表情,输入不同的符号码(两个冒号包围的字符)可以显示出不同的表情。

    :smile:

    😄

    29. 跨度元素-内联公式

    To use this feature, please enable it first in the Preference Panel -> Markdown Tab. Then, use $ to wrap a TeX command. For example: $\lim_{x \to \infty} \exp(-x) = 0$ will be rendered as LaTeX command. lim ⁡ x → ∞ exp ⁡ ( − x ) = 0 \lim_{x \to \infty} \exp(-x) = 0 xlimexp(x)=0

    30. 跨度元素-下标

    To use this feature, please enable it first in the Preference Panel -> Markdown Tab. Then, use ~ to wrap subscript content. For example: H~2~O, X~long\ text~/

    可以使用 <sub>文本</sub>实现下标。

    H<sub>2</sub>O

    H2O

    31. 跨度元素-上标

    可以使用<sup>文本</sup>实现上标。

    <sup>2</sup> X^2

    x2

    32. 跨度元素-高亮

    ==高亮==(需在设置中打开该功能)

    ==高亮==

    高亮

    33. 跨度元素-HTML

    使用 <center>这是要居中的内容</center>可以使文本居中

    这是要居中的内容

    You can use HTML to style content what pure Markdown does not support. For example, use <span style="color:red">this text is red</span> to add text with red color.

    this text is red

    34. 跨度元素-嵌入内容

    支持iframe-based嵌入代码,

    <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>

    35. 跨度元素-视频

    You can use the <video> HTML tag to embed videos. For example:

    <video src="xxx.mp4" />

    36. 跨度元素-换行符

    使用 空格 + 空格 + Enter可以实现换行,例如:

    或者可以使用<br/>实现换行。

    37. 转义

    Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符,Markdown 使用反斜杠转义特殊字符:

    Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:

    \ 反斜线 ` 反引号 * 星号 _ 下划线 {} 花括号 [] 方括号 () 小括号 # 井字号 + 加号 - 减号 . 英文句点 ! 感叹号

    38. 总结

    建议打开大纲视图Ctrl + Shift + 1

    插入表格需要顶格写,否则无法显示

    语法无须刻意记忆,右键可查询

    39. 附录

    菜鸟教程:https://www.runoob.com/markdown/md-tutorial.html


    这儿是脚注1 ↩︎

    Processed: 0.018, SQL: 9