加载中...
Featured image of post Markdown语法指南

Markdown语法指南

Markdown常用语法

Markdown语法指南

概述

MarkdownDaring Fireball 创建,原始指南在 这里 。但是,它的语法因不同的解析器或编辑器而异。Typora
正在使用 [GitHub Flavored Markdown][GFM]。

块元素

段落和换行符

在 普通文本中/普通段落/引用(quote) 中遵循以下规律;
在代码块或者有序或者无序列表中,一个回车就是换行

  1. 语法层面:

    1. 使用两个以上空格加上回车

      • 注意某些非markdown的编辑器会自动删除行尾空格,比如使用了 EditorConfig 的, 需要设置:

        1
        2
        
        [*.md] # 对所有 md 文件生效  
        trim_trailing_whitespace = false # 保留行末的空格
        Copied!
    2. 也可以在段落后面使用一个空行来表示重新开始一个段落

  2. 在Typora中

    • 编辑->空格与换行->取消‘保留单换行符’, 即严格换行模式
    • 您只需按下 Return 即可创建新段落。
    • Shift + Return 可创建单个换行符。但是,大多数 markdown 解析器将忽略单行中断,要使其他 markdown 解析器识别您的换行符,可以在行尾留下两个空格,或者插入 <br/>.
  3. 在Obsidian中

    • 使用easy-typing-obsidian 插件,可以保证在普通段落编辑时,每次按回车换行时,生成两个换行符
    • 也可以使用 在行尾留下两个空格, 然后按回车, 来手动换行
    • Shift + Return 可创建单个换行符, 渲染时会变成同一行

标题

标题在行的开头使用1-6个字符,对应于标题级别1-6。例如:

# 这是一级标题

## 这是二级标题

###### 这是六级标题
Copied!

在typora中,输入后跟标题内容,按下 Return 键将创建标题。

引用文字

Markdown 使用 > 字符进行块引用。在typora中,只需输入’>‘后跟引用内容即可生成块引用。Typora将为您插入正确的“>”或换行符。通过添加额外级别的“>”允许在块引用内嵌入另一个块引用。它们表示为:

1
2
3
4
5
6
7
8
> 这是一级缩进  
>> 这是二级缩进  
>>> 这是三级缩进  
> 
>> 再来一个二级缩进  
>>> 再来一个三级缩进  

>> 这是新的块引用  
Copied!

效果如下:

这是一级缩进

这是二级缩进

这是三级缩进

再来一个二级缩进

再来一个三级缩进

这是新的块引用

列表

输入 - list item 1 将创建一个无序列表,该 - 符号可以替换为 +*.

输入 1. list item 1 将创建一个有序列表,有序和无序列表都可以缩进, 其 markdown 源代码如下:

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

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

效果:

无序列表

  • 红色
    • 绿色
  • 蓝色

有序列表

  1. 红色
    1. 绿色
  2. 蓝色

任务列表

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

- [ ] 这是一个任务列表项
- [ ] 需要在前面使用列表的语法
- [ ] normal **formatting**, @mentions, #1234 refs
- [ ] 未完成
- [x] 完成
Copied!

效果:

  • 这是一个任务列表项
  • 需要在前面使用列表的语法
  • normal formatting, @mentions, #1234 refs
  • 未完成
  • 完成

您可以通过单击项目前面的复选框来更改完成/未完成状态。

(栅栏式)代码块

Typora仅支持 Github Flavored Markdown 中的栅栏式代码块。不支持 markdown 中的原始代码块。

使用栅栏式代码块很简单:输入```之后输入一个可选的语言标识符,然后按return键后输入代码,我们将通过语法高亮显示它:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
这是一个例子:

```
function test() {
  console.log("notice the blank line before this function?");
}
```

语法高亮:
```javascript
function test() {
  console.log("notice the blank line before this function?");
}
```
Copied!

还可以给代码块设置额外的class、行号是否显示、缩进等

1
2
3
4
5
```javascript{class="md-reference-block" lineNos=false tabWidth=2}
function test() {
  console.log("notice the blank line before this function?");
}
```
Copied!

数学公式块

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

typora中输入 $$, 然后按“return”键将触发一个接受Tex / LaTex源代码的输入区域。
在 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}
$$
Copied!

表格

输入 | First Header | Second Header | 并按下 return 键将创建一个包含两列的表。

创建表后,焦点在该表上将弹出一个表格工具栏,您可以在其中调整表格,对齐或删除表格。您还可以使用上下文菜单来复制和添加/删除列/行。

可以跳过以下描述,因为表格的 markdown 源代码是由typora自动生成的。

在 markdown 源代码中,它们看起来像这样:

1
2
3
4
| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
Copied!

效果:

First HeaderSecond Header
Content CellContent Cell
Content CellContent Cell

您还可以在表格中包括内联 Markdown 语法,例如链接,粗体,斜体或删除线。

最后,通过在标题行中包含冒号:您可以将文本定义为左对齐,右对齐或居中对齐:

1
2
3
4
5
| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |
Copied!

效果:

Left-AlignedCenter AlignedRight Aligned
col 3 issome wordy text$1600
col 2 iscentered$12
zebra stripesare neat$1

最左侧的冒号表示左对齐的列; 最右侧的冒号表示右对齐的列; 两侧的冒号表示中心对齐的列。

脚注

您可以在任何位置像这样创建脚注,他会显示在文章结尾处:

[^1]: 这是脚注的内容
Copied!

使用脚注:

这是一个需要添加脚注的文本[^1]。
Copied!

效果:
这是一个需要添加脚注的文本1

鼠标移动到‘1’上标中查看脚注的内容。

水平线

输入 ***---<hr/>在空行上按 return 键将绘制一条水平线。
效果:




目录 (TOC)

typora中输入 [toc] 然后按 Return 键将创建一个“目录”部分,自动从文档内容中提取所有标题,其内容会自动更新。

缩进

1、图片缩进

1.1 在列表中

  • 列表中某个层级按下回车后,继续按回车直到光标在无缩进的行首,再粘贴图片语句,移动光标到行首,按下tab键调整缩进,经渲染后图片会配合列表自动缩进;
  • 如果是有序列表,直接按回车到行首会影响后面的前标,要不影响的话,可以使用shift+return,然后删除缩进到行首,然后再回车换行,插入语句,回车换行
  • 但是在普通段落中,用tab键调整图片的缩进,是不可行的,必须要和列表配合;
  • 图片的上下必须用空行与列表隔开;

如:

  1. aaaaaa
    1. bbbbbb

    2. cccccc

    3. dddddd

    4. eeeeee

1.2 使用css

但是在某些渲染环境中不能正常显示(如github的渲染)

描述
描述
这是图片的标题

2、代码块缩进

2.1 在列表中

  • 列表中某个层级按下回车后,继续按回车直到光标在无缩进的行首,再粘贴代码块语句,选中整个代码块语句,按下tab键调整缩进,经渲染后代码块会配合列表自动缩进;
  • 如果是有序列表,直接按回车到行首会影响后面的前标,要不影响的话,可以使用shift+return,然后删除缩进到行首,然后再回车换行,插入语句,回车换行
  • 但是在普通段落中,用tab键调整代码块的缩进,是不可行的,必须要和列表配合;
  • 代码块的上下必须用空行与列表隔开;

如:

  1. aaaaaa
    1. bbbbbb

    2. cccccc

      1
      2
      3
      
      function calculate(t, i) {  
        return Math.random() * (i - t) + t  
      }
      Copied!
    3. dddddd

    4. eeeeee

2.2 使用css

与图片用css缩进类似,在某些渲染环境中不能正常显示(如github的渲染)


function calculate(t, i) {  
  return Math.random() * (i - t) + t  
}

行元素

在您输入后行元素会被立即解析并呈现。在这些span元素上移动光标会将这些元素扩展为markdown源代码。以下将解释这些span元素的语法。

链接

Markdown 支持两种类型的链接:内联和引用。

在这两种样式中,链接文本都写在[方括号]内。

要创建内联链接,请在链接文本的结束方括号后立即使用一组常规括号。在常规括号内,输入URL地址,以及可选的用引号括起来的链接标题。例如:

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.
Copied!

效果:

This is an example inline link.

This link has no title attribute.

内部链接

您可以将常规括号内的 href 设置为文档内的某一个标题,这将创建一个书签,允许您在单击后跳转到该部分。
typora中需要Command(在Windows上:Ctrl) + 单击 将跳转到标题 块元素处。

[内部跳转](#脚注)
[外部跳转](/articles/with-hugo/page-a#title_a)
Copied!

效果:
内部跳转
外部跳转

链接引用

这种方法使得你可以在文档中的多个地方引用同一个链接,而不需要重复输入链接的地址和标题。
在文档中的任何位置,创建一个链接引用

[bd]: https://www.baidu.com	"百度搜索"
Copied!

使用方式:

这是一个[百度][bd]链接。
Copied!

效果:
这是一个百度 链接。

隐式链接名称快捷方式允许您省略链接的名称,在这种情况下,链接文本本身将用作名称:

创建:

[Google]: https://www.google.com

效果:

这是一个[Google][]链接。
Copied!

效果:

这是一个Google 链接。

URL网址

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

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

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

图片

图像与链接类似, 但在链接语法之前需要添加额外的 ! 字符。 图像语法如下所示:

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

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

在typora中您可以使用拖放操作从图像文件或浏览器来插入图像。并通过单击图像修改 markdown 源代码。如果图像在拖放时与当前编辑文档位于同一目录或子目录中,则将使用相对路径。

强调(斜体)

Markdown 将星号 (*) 和下划线(_) 视为强调的指示。用一个 * or _ 包裹文本将使用HTML <em> 标签包裹文本。用两个 * or _ 包裹文本将使用HTML <strong> 标签包裹文本。

1
2
3
<em> 元素用于表示强调文本,通常以斜体样式显示。它的语义意义是“强调”或“重点”,而不是特定的样式。浏览器默认会以斜体显示 <em> 元素的内容,但是它的确切样式取决于 CSS 样式表中的定义。

<strong> 元素用于表示重要文本,通常以加粗样式显示。它的语义意义是“重要”,而不是特定的样式。浏览器默认会以加粗显示 <strong> 元素的内容,但是它的确切样式同样取决于 CSS 样式表中的定义。
Copied!

例如:

1
2
3
4
5
6
7
*一个星号*

_一个下划线_

**两个星号**

__两个下划线__
Copied!

效果:

一个星号

一个下划线

两个星号

两个下划线

块引用中将忽略单词中的下划线,这通常用在代码和名称中,如下所示:

wow__great__stuff

do__this__and_do__that__and_another_thing.

要在用作强调分隔符的位置生成文字星号或下划线,可以用反斜杠转义:

**这个文字被文字星号包围**

推荐使用*

代码

要指示代码范围,请使用反引号(`)进行包裹。与预格式化的代码块不同,代码跨度表示正常段落中的代码。例如:

aa`bb`cc
Copied!

效果:

aabbcc

删除线

GFM通过添加语法来创建删除线文本,标准的Markdown中缺少该功能。

~~错误的文字。~~ 变成 错误的文字。

下划线

下划线由原始HTML提供支持。

<u>下划线</u> 变成 下划线

表情符号 :smile:

输入表情符号的语法是 :smile:
在typora中,用户可以通过 ESC 按键触发表情符号的自动完成建议,或者在偏好设置面板里启用后自动触发表情符号。此外,还支持直接从 Edit -> Emoji & Symbols 菜单栏输入UTF8表情符号字符。

内联数学公式

在typora中,要使用此功能,首先,请在 偏好设置 面板 -> Markdown扩展语法 选项卡中启用它。然后使用 $ 来包裹TeX命令,例如: $\lim_{x \to \infty} \exp(-x) = 0$ 将呈现为LaTeX命令。

要触发内联公式的预览提示功能:输入“$”, 然后按 ESC 键, 然后输入TeX命令, 预览工具提示将如下所示:

下标

在typora中,要使用此功能,首先,请在 偏好设置 面板 -> Markdown扩展语法 选项卡中启用它。然后用 ~ 来包裹下标内容,例如: H~2~O, X~long\ text~Y

效果:

H2O Xlong\ textY

上标

在typora中,要使用此功能,首先,请在 偏好设置 面板 -> Markdown扩展语法 选项卡中启用它。然后用 ^ 来包裹上标内容,例如: X^2^

效果:

X^2^

高亮

在typora中,要使用此功能,首先,请在 偏好设置 面板 -> Markdown扩展语法 选项卡中启用它。然后用 == 来包裹高亮内容,例如: ==highlight==

效果:

==highlight==

HTML

您可以使用HTML来设置纯 Markdown 不支持的内容,例如, <span style="color:red">this text is red</span> 用于添加红色文本。

嵌入内容

有些网站提供基于iframe的嵌入代码,您也可以将其粘贴到Markdown中,例如:

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

视频

您可以使用 <video> HTML标记嵌入视频,例如:

<video src="xxx.mp4" />
Copied!

其他 HTML 支持

你可以在这里 找到细节。


  1. 这是脚注的内容 ↩︎

Licensed under CC BY-NC-SA 4.0
最后更新于 2024年11月2日 18:34
发表了90篇文章 · 总计613.28k字
本站总访问量本站访客数人次

目录