--- weight: 4 title: "Markdown 基本语法" date: 2019-12-01T21:57:40+08:00 lastmod: 2020-01-01T16:45:40+08:00 draft: false author: "Dillon" authorLink: "https://dillonzq.com" description: "这篇文章展示了基本的 Markdown 语法和格式." images: [] resources: - name: "featured-image" src: "featured-image.png" tags: ["Markdown", "HTML"] categories: ["Markdown"] lightgallery: true --- 这篇文章提供了可以在 Hugo 的文章中使用的基本 Markdown 语法示例. {{< admonition >}} 这篇文章借鉴了一篇很棒的[来自 Grav 的文章](http://learn.getgrav.org/content/markdown). 如果你想了解 **Loveit** 主题的扩展 Markdown 语法, 请阅读[扩展 Markdown 语法页面](../theme-documentation-content#extended-markdown-syntax). {{< /admonition >}} 事实上, 编写 Web 内容很麻烦. [WYSIWYG]^(所见即所得) 编辑器帮助减轻了这一任务. 但通常会导致代码太糟, 或更糟糕的是, 网页也会很丑. 没有通常伴随的所有复杂和丑陋的问题, **Markdown** 是一种更好的生成 **HTML** 内容的方式. 一些主要好处是: 1. Markdown 简单易学, 几乎没有多余的字符, 因此编写内容也更快. 2. 用 Markdown 书写时出错的机会更少. 3. 可以产生有效的 XHTML 输出. 4. 将内容和视觉显示保持分开, 这样就不会打乱网站的外观. 5. 可以在你喜欢的任何文本编辑器或 Markdown 应用程序中编写内容. 6. Markdown 使用起来很有趣! John Gruber, Markdown 的作者如是说: > Markdown 格式的首要设计目标是更具可读性. > 最初的想法是 Markdown 格式的文档应当以纯文本形式发布, > 而不会看起来像被标签或格式说明所标记. > 虽然 Markdown 的语法受到几种现有的文本到 HTML 转换工具的影响, > 但 Markdown 语法的最大灵感来源是纯文本电子邮件的格式. > > {{< style "text-align: right;" >}}-- _John Gruber_{{< /style >}} 话不多说, 我们来回顾一下 Markdown 的主要语法以及生成的 HTML 样式! {{< admonition tip >}} :(far fa-bookmark fa-fw): 将此页保存为书签,以备将来参考! {{< /admonition >}} ## 1 标题 从 `h2` 到 `h6` 的标题在每个级别上都加上一个 `#`: ```markdown ## h2 标题 ### h3 标题 #### h4 标题 ##### h5 标题 ###### h6 标题 ``` 输出的 HTML 看起来像这样: ```html
`/`
` 标签包裹. 如下段落: ```markdown Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad. ``` 输出的 HTML 看起来像这样: ```htmlLorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
``` 可以使用一个空白行进行**换行**. ## 5 内联 HTML 元素 如果你需要某个 HTML 标签 (带有一个类), 则可以简单地像这样使用: ```html Markdown 格式的段落.``` 引用也可以嵌套: ```markdown > Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi. >> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam. ``` 呈现的输出效果如下: > Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi. >> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam. ## 8 列表 ### 无序列表 一系列项的列表, 其中项的顺序没有明显关系. 你可以使用以下任何符号来表示无序列表中的项: ```markdown * 一项内容 - 一项内容 + 一项内容 ``` 例如: ```markdown * Lorem ipsum dolor sit amet * Consectetur adipiscing elit * Integer molestie lorem at massa * Facilisis in pretium nisl aliquet * Nulla volutpat aliquam velit * Phasellus iaculis neque * Purus sodales ultricies * Vestibulum laoreet porttitor sem * Ac tristique libero volutpat at * Faucibus porta lacus fringilla vel * Aenean sit amet erat nunc * Eget porttitor lorem ``` 呈现的输出效果如下: * Lorem ipsum dolor sit amet * Consectetur adipiscing elit * Integer molestie lorem at massa * Facilisis in pretium nisl aliquet * Nulla volutpat aliquam velit * Phasellus iaculis neque * Purus sodales ultricies * Vestibulum laoreet porttitor sem * Ac tristique libero volutpat at * Faucibus porta lacus fringilla vel * Aenean sit amet erat nunc * Eget porttitor lorem 输出的 HTML 看起来像这样: ```htmlFusion Drive combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
`
包装行内代码段.
```markdown
在这个例子中, `` 会被包裹成 **代码**.
```
呈现的输出效果如下:
在这个例子中, `` 会被包裹成 **代码**.
输出的 HTML 看起来像这样:
```html
在这个例子中, <section></section>
会被包裹成 代码.
// Some comments
line 1 of code
line 2 of code
line 3 of code
```
### 围栏代码块
使用 "围栏" ```
来生成一段带有语言属性的代码块.
{{< highlight markdown >}}
```markdown
Sample text here...
```
{{< / highlight >}}
输出的 HTML 看起来像这样:
```html
Sample text here...
```
### 语法高亮
[GFM]^(GitHub Flavored Markdown) 也支持语法高亮.
要激活它,只需在第一个代码 "围栏" 之后直接添加你要使用的语言的文件扩展名,
```js
, 语法高亮显示将自动应用于渲染的 HTML 中.
例如, 在以下 JavaScript 代码中应用语法高亮:
{{< highlight markdown >}}
```js
grunt.initConfig({
assemble: {
options: {
assets: 'docs/assets',
data: 'src/data/*.{json,yml}',
helpers: 'src/custom-helpers.js',
partials: ['src/partials/**/*.{hbs,md}']
},
pages: {
options: {
layout: 'default.hbs'
},
files: {
'./': ['src/templates/pages/index.hbs']
}
}
}
};
```
{{< / highlight >}}
呈现的输出效果如下:
```js
grunt.initConfig({
assemble: {
options: {
assets: 'docs/assets',
data: 'src/data/*.{json,yml}',
helpers: 'src/custom-helpers.js',
partials: ['src/partials/**/*.{hbs,md}']
},
pages: {
options: {
layout: 'default.hbs'
},
files: {
'./': ['src/templates/pages/index.hbs']
}
}
}
};
```
{{< admonition >}}
**Hugo** 文档中的 [语法高亮页面](https://gohugo.io/content-management/syntax-highlighting/) 介绍了有关语法高亮的更多信息,
包括语法高亮的 shortcode.
{{< /admonition >}}
## 10 表格
通过在每个单元格之间添加竖线作为分隔线, 并在标题下添加一行破折号 (也由竖线分隔) 来创建表格. 注意, 竖线不需要垂直对齐.
```markdown
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
```
呈现的输出效果如下:
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
输出的 HTML 看起来像这样:
```html
Option | Description |
---|---|
data | path to data files to supply the data that will be passed into templates. |
engine | engine to be used for processing templates. Handlebars is the default. |
ext | extension to be used for dest files. |