一、Markdown简介
Markdown
是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。 它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML
(或者HTML
)文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于 Markdown
的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,许多网站都广泛使用 Markdown
来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等,甚至还能被使用来撰写电子书。
二、Markdown语法指南
本篇博文提供了一些可以在 Hugo 内容文件(可以使用它生成静态页面)中使用的基本 Markdown 语法指南,还展示了Hugo 主题中是否使用 CSS 装饰基本 HTML 元素。
博文中介绍的 MarkDown
语法可以使用 MarkDown
在线工具(如:https://tool.lu/markdown/)进行编写练习,也可使用本地支持 MarkDown
的编辑器软件(如:VS Code、Typra等)进行编写练习。
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
2.1 Markdown标头(Headings)语法
Markdown
使用 #
符号表示标头,#
符号的数量表示标题的级别,例如,#
表示一级标题,##
表示二级标题,以此类推,最多支持六级标题。
Markdown标头 的六个元素依次对应 HTML 中的 <h1>
– <h6>
六个级别的 h
标签(用于定义标题)元素,<h1>
是最高级别的标题,而<h6>
是最低级别的标题。
The following HTML
<h1>
—<h6>
elements represent six levels of section headings.<h1>
is the highest section level while<h6>
is the lowest.
以下Markdown
1-6级标头语法示例:
|
|
以下是Markdown标头
(Headings)的展示效果:
2.2 Markdown段落(Paragraph)语法
Markdown
的段落(Paragraph)语法为直接书写,段落之间使用空行分隔开,如下是一个不带任何修饰的Markdown段落示例:
|
|
以下是Markdown
段落(Paragraph)的展示效果:
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
2.3 文字的格式(text format)语法
1、斜体文本写法
|
|
展示效果:
斜体文本1
斜体文本2
2、粗体文本语法
|
|
展示效果:
粗体文本1
粗体文本2
3、粗斜体文本语法
|
|
展示效果:
粗斜体文本1
粗斜体文本2
4、高亮文本语法
|
|
展示效果:
高亮文本
5、带有删除线的文本
|
|
展示效果:
带有删除线的文本
6、带有下划线的文本
|
|
展示效果:
带有下划线的文本
7、带有白框(表示键盘按键)的文本
|
|
展示效果:
Ctl键、Shift键
2.4 Markdown区块(Blockquotes)语法
1、普通的Markdown区块(Blockquotes)
Markdown
区块(Blockquotes)元素是使用反引号 `` 包围的内容区域,用来表示从另一个源引用的内容,可以是有必须在页脚或引用内的引文,也可以是注释和缩写。
以下是Markdown
区块((Blockquotes)的示例:
|
|
以下是普通的Markdown区块(Blockquotes)的展示效果:
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer
or cite
element, and optionally with in-line changes such as annotations and abbreviations.
这是一行C代码 int i = 100;
2、不标注出处的区块(Blockquote without attribution)
Markdown
使用大于符号 > 作为行首字符表示不标注出处的区块(Blockquotes)元素, 以下是Markdown
不标注出处的区块(Blockquotes)元素的示例:
|
|
不标注出处的区块(Blockquotes)元素的展示效果:
Tiam, ad mint andaepu dandae nostion secatur sequo quae.
Note that you can use Markdown syntax within a blockquote.
3、标注出处的区块(Blockquote with attribution)
以下是Markdown
标注出处的区块(Blockquotes)元素的示例:
|
|
标注出处的区块(Blockquotes)元素的展示效果:
Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike1
Tips: 出处1 在文章末尾显示。
4、嵌套的区块
以下是Markdown
嵌套的区块(Blockquotes)元素的示例:
|
|
展示效果:
abc
abcd
abcde
2.5 表格(Tables)
1、表格不是Markdown核心规范的一部分,但Hugo支持开箱即用
Tables aren’t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
Markdown
中表格的语法:
|
|
Markdown
中表格的效果:
Name | Age |
---|---|
Bob | 27 |
Alice | 23 |
左对齐 | 右对齐 | 居中对齐 |
---|---|---|
文本内容 | 文本内容 | 文本内容 |
文本内容 | 文本内容 | 文本内容 |
2、表格中使用内联Markdown (Inline Markdown within tables)的 语法:
|
|
Markdown
表格中使用内联Markdown的效果:
Italics | Bold | Code |
---|---|---|
italics | bold | code |
3、设置表格列宽度 语法:
|
|
Markdown
表格中使用内联Markdown的效果:
Italics |
Bold | Code |
---|---|---|
italics | bold | code |
2.6 代码块(Code Blocks)
1、Code block with backticks(反引号)
使用三个反引号 ``` 开头的行开始 到再一次遇到 三个反引号 ``` 的区域为代码块,代码块可以在开头的 ``` 后紧跟着代码标签如 c、c++、html、golang、mysql 等等。
代码块(Code Blocks)的语法:
|
|
代码块(Code Blocks)的展示效果:
|
|
2、Diff code block
Diff代码块(Code Blocks)的语法:
|
|
Diff代码块(Code Blocks)的展示效果:
|
|
3、One line code block
|
|
2.7 列表类型(List Types)
1、有序列表(Ordered List)
有序列表(Ordered List)的写法:
|
|
有序列表(Ordered List)的展示效果:
- First item
- Second item
- Third item
- First item
- Second item
- Third item
2、无序列表(Unordered List)
无序列表(Unordered List) 是以 *
、+
或 -
和一个空格连接使用,但不建议用后两项,易与其它符号相关联,
无序列表(Ordered List)的写法:
|
|
无序列表(Ordered List)的展示效果:
- List item
- Another item
- And another item
3、嵌套列表(Nested list)
嵌套列表(Ordered List)的写法:
|
|
嵌套列表(Ordered List)的展示效果:
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
2.8 分割线(Divider)语法
|
|
展示效果:
2.9 链接和图片
1、链接
第一种,直接使用链接: https://www.lemubei.com 第二种,文字中包含超链接,做个示范:
|
|
效果如下:
2、图片
图片的格式为一个: ! + [文本,可不填] + (图片地址 “可选标题”)
|
|
展示效果
2.10 其它MarkDown
元素(Other Elements)
1、abbr
元素写法:
|
|
展示效果:
GIF is a bitmap image format.
2、sub
元素写法:
|
|
展示效果:
H2O
3、pub
元素写法:
|
|
展示效果:
Xn + Yn = Zn
4、kbd
元素写法:
|
|
展示效果:
Press CTRL + ALT + Delete to end the session.
5、mark
元素写法:
|
|
展示效果:
Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.
6、注释写法:
|
|
三、数学类型设置(Math Typesetting)
MarkDown文档中的 数学类型设置(Math Typesetting) 链接。