本文提供了可用于 Hugo 内容文件的基本 Markdown 语法示例,还显示了 Hugo 主题中的基本 HTML 元素是否使用 CSS 进行修饰。
标题
如下的 <h1>—<h6> 显示了标题的6个级别, <h1> 级别最高, <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>的追求。 |
兴学强国的使命,实事求是的校训,严谨治学的校风,矢志创新的追求。 |
段落
普通段落
文本内容全部在一行内:
|
|
效果:
马克思主义者认为,只有人们的社会实践,才是人们对于外界认识真理性的标准。实际的情形是这样的,只有在社会实践过程中(物质生产过程中,阶级斗争过程中,科学实验过程中),人们达到了思想中所预想的结果时,人们的认识才被证实了。人们要想得到工作的胜利即得到预想的结果,一定要使自己的思想合于客观外界的规律性,如果不合,就会在实践中失败。人们经过失败之后,也就从失败取得教训,改正自己的思想使之适合于外界的规律性,人们就能变失败为胜利,所谓“失败是成功之母”,“吃一堑长一智”,就是这个道理。
首行缩进
<p style="text-indent: 2em;margin-top: 0;margin-bottom: 0;"> 文本 </p>,其中margin-top: 0表示忽略段前空行,margin-bottom: 0表示忽略段后空行。
示例:
|
|
效果:
君子曰:学不可以已。
青,取之于蓝而青于蓝;冰,水为之而寒于水。木直中绳,輮以为轮,其曲中规。虽有槁暴,不复挺者,輮使之然也。故木受绳则直,金就砺则利,君子博学而日参省乎己,则知明而行无过矣。
吾尝终日而思矣,不如须臾之所学也;吾尝跂而望矣,不如登高之博见也。登高而招,臂非加长也,而见者远;顺风而呼,声非加疾也,而闻者彰。假舆马者,非利足也,而致千里;假舟楫者,非能水也,而绝江河。君子生非异也,善假于物也。
积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。
居中
<div style="text-align: center;"> 文本 </div>或<center> 文本 </center>
对齐
左对齐:默认
右对齐:<div style="text-align: right;"> 文本 </div>
引用
引用元素表示从另一个来源引用的内容,可以选择引用必须在footer或cite元素内,也可以选择内联更改,如注释和缩写。
不含注解的引用
|
|
效果:
Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.
包含注解的引用
|
|
效果:
不积跬步,无以至千里;不积小流,无以成江海。 ——— 荀子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 |
代码块
使用三个竖撇号包裹
|
|
使用Tab缩进表示
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
自动代码高亮
|
|
代码比较
|
|
列举类
有序列举
|
|
效果:
- 项目一
- 项目二
- 项目三
无序列举
|
|
效果:
- 项目
- 另一个项目
- 再一个项目
嵌套列举
|
|
效果:
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
$\TeX$
在Markdown文件中,$\TeX$ 文本须使用$…$(行内文本)或$$…$$(行间文本)包裹.
注意:若要在行内文本中显示行间文本的样式,须加上
\displaystyle.
具体内容见此处
其他
隐藏内容
|
|
效果:
点击展开隐藏内容
隐藏内容
插入图片
Markdown风格的图片插入操作:
|
|
html风格的图片插入操作:
|
|
效果:
Markdown风格:

html风格:
参考资料
-
荀子,中国古代哲学家。 ↩︎