Featured image of post Markdown语法

Markdown语法

Markdown语法案例

本文提供了可用于 Hugo 内容文件的基本 Markdown 语法示例,还显示了 Hugo 主题中的基本 HTML 元素是否使用 CSS 进行修饰。

标题

如下的 <h1><h6> 显示了标题的6个级别, <h1> 级别最高, <h6> 级别最低.

1
2
3
4
5
6
# H1
## H2
### H3
#### H4
##### H5
###### H6

文本

类型 语法 效果
加粗 **文本** 文本
斜体 *文本* 文本
下划线 <span style="text-decoration: wavy underline;"> 天津大学是中国第一所现代大学。 </span>
<u> 2025年将迎来天津大学130周年校庆。 </u>
天津大学是中国第一所现代大学。
2025年将迎来天津大学130周年校庆。
上标 H<sub>2</sub>O H2O
下标 X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup> Xn + Yn = Zn
方框 按下 <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> 以结束段落。 按下 CTRL + ALT + Delete 以结束段落。
高亮显示 <mark>兴学强国</mark>的使命,<mark>实事求是</mark>的校训,<mark>严谨治学</mark>的校风,<mark>矢志创新</mark>的追求。 兴学强国的使命,实事求是的校训,严谨治学的校风,矢志创新的追求。

段落

普通段落

文本内容全部在一行内:

1
马克思主义者认为,只有人们的社会实践,才是人们对于外界认识真理性的标准。实际的情形是这样的,只有在社会实践过程中(物质生产过程中,阶级斗争过程中,科学实验过程中),人们达到了思想中所预想的结果时,人们的认识才被证实了。人们要想得到工作的胜利即得到预想的结果,一定要使自己的思想合于客观外界的规律性,如果不合,就会在实践中失败。人们经过失败之后,也就从失败取得教训,改正自己的思想使之适合于外界的规律性,人们就能变失败为胜利,所谓“失败是成功之母”,“吃一堑长一智”,就是这个道理。

效果:

马克思主义者认为,只有人们的社会实践,才是人们对于外界认识真理性的标准。实际的情形是这样的,只有在社会实践过程中(物质生产过程中,阶级斗争过程中,科学实验过程中),人们达到了思想中所预想的结果时,人们的认识才被证实了。人们要想得到工作的胜利即得到预想的结果,一定要使自己的思想合于客观外界的规律性,如果不合,就会在实践中失败。人们经过失败之后,也就从失败取得教训,改正自己的思想使之适合于外界的规律性,人们就能变失败为胜利,所谓“失败是成功之母”,“吃一堑长一智”,就是这个道理。

首行缩进

<p style="text-indent: 2em;margin-top: 0;margin-bottom: 0;"> 文本 </p>,其中margin-top: 0表示忽略段前空行,margin-bottom: 0表示忽略段后空行。

示例:

1
2
3
4
<p style="text-indent: 2em;margin-top: 0;margin-bottom: 0;"> 君子曰:学不可以已。 </p>
<p style="text-indent: 2em;margin-top: 0;margin-bottom: 0;">青,取之于蓝而青于蓝;冰,水为之而寒于水。木直中绳,輮以为轮,其曲中规。虽有槁暴,不复挺者,輮使之然也。故木受绳则直,金就砺则利,君子博学而日参省乎己,则知明而行无过矣。 </p>
<p style="text-indent: 2em;margin-top: 0;margin-bottom: 0;">吾尝终日而思矣,不如须臾之所学也;吾尝跂而望矣,不如登高之博见也。登高而招,臂非加长也,而见者远;顺风而呼,声非加疾也,而闻者彰。假舆马者,非利足也,而致千里;假舟楫者,非能水也,而绝江河。君子生非异也,善假于物也。</p>
<p style="text-indent: 2em;margin-top: 0;margin-bottom: 0;">积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。</p>

效果:

君子曰:学不可以已。

青,取之于蓝而青于蓝;冰,水为之而寒于水。木直中绳,輮以为轮,其曲中规。虽有槁暴,不复挺者,輮使之然也。故木受绳则直,金就砺则利,君子博学而日参省乎己,则知明而行无过矣。

吾尝终日而思矣,不如须臾之所学也;吾尝跂而望矣,不如登高之博见也。登高而招,臂非加长也,而见者远;顺风而呼,声非加疾也,而闻者彰。假舆马者,非利足也,而致千里;假舟楫者,非能水也,而绝江河。君子生非异也,善假于物也。

积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。

居中

<div style="text-align: center;"> 文本 </div><center> 文本 </center>

对齐

左对齐:默认

右对齐:<div style="text-align: right;"> 文本 </div>

引用

引用元素表示从另一个来源引用的内容,可以选择引用必须在footercite元素内,也可以选择内联更改,如注释和缩写。

不含注解的引用

1
2
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use *Markdown syntax* within a blockquote.

效果:

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.

包含注解的引用

1
2
> 不积跬步,无以至千里;不积小流,无以成江海。
> ——— <cite>荀子[^1]</cite>

效果:

不积跬步,无以至千里;不积小流,无以成江海。 ——— 荀子1

表格

表格不是Markdown语法的核心功能,但是Hugo同样为其提供了支持。

姓名 年级 专业
张三 2024级 计算机科学与技术
李四 2023级 软件工程
斜体 加粗 代码
italics bold code
A B C D E F
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex. Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus Proin sit amet velit nec enim imperdiet vehicula. Ut bibendum vestibulum quam, eu egestas turpis gravida nec Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien

代码块

使用三个竖撇号包裹

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!doctype html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <title>Example HTML5 Document</title>
  </head>
  <body>
      <p>Test</p>
  </body>
</html>

使用Tab缩进表示

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example HTML5 Document</title>
    </head>
    <body>
        <p>Test</p>
    </body>
</html>

自动代码高亮

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example HTML5 Document</title>
    </head>
    <body>
        <p>Test</p>
    </body>
</html>

代码比较

1
2
3
4
5
[dependencies.bevy]
git = "https://github.com/bevyengine/bevy"
rev = "11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13"
- features = ["dynamic"]
+ features = ["jpeg", "dynamic"]

列举类

有序列举

1
2
3
1. 项目一
2. 项目二
3. 项目三

效果:

  1. 项目一
  2. 项目二
  3. 项目三

无序列举

1
2
3
* 项目
* 另一个项目
* 再一个项目

效果:

  • 项目
  • 另一个项目
  • 再一个项目

嵌套列举

1
2
3
4
5
6
7
* Fruit
  * Apple
  * Orange
  * Banana
* Dairy
  * Milk
  * Cheese

效果:

  • Fruit
    • Apple
    • Orange
    • Banana
  • Dairy
    • Milk
    • Cheese

$\TeX$

在Markdown文件中,$\TeX$ 文本须使用$…$(行内文本)或$$…$$(行间文本)包裹.

注意:若要在行内文本中显示行间文本的样式,须加上\displaystyle.

具体内容见此处

其他

隐藏内容

1
2
3
4
5
<details>
      <summary>点击展开隐藏内容</summary>
      
隐藏内容
</details>

效果:

点击展开隐藏内容

隐藏内容

插入图片

Markdown风格的图片插入操作:

1
![图片文件](网址) 

html风格的图片插入操作:

1
[<img src="https://xxx.com/image.png" width="400">](点击跳转的链接)

效果:

Markdown风格:

班徽

html风格:

参考资料


  1. 荀子,中国古代哲学家。 ↩︎

网站总访客数:Loading

使用 Hugo 构建
主题 StackJimmy 设计