Markdown 语法支持

仅以此篇文章来测试下在 NexT 主题中在通过 Hugo 引擎来建站时,是否支持 Markdown 文件内容中所写的各种语法,并展示下实际的效果。

标题样式

让我们从所有可能的标题开始,在 HTML 中 <h1>-<h6>元素分别表示六个不同级别的标题样式,其中 <h1> 为最大标题,<h6>为最小标题,效果如下:

标题 1

标题 2

标题 3

标题 4

标题 5
标题 6

段落格式

根据 W3C 定义的 HTML5 规范 HTML 文档由元素和文本组成。每个元素的组成都由一个 开始标记 表示,例如: <body> ,和 结束标记 表示,例如: </body> 。(某些开始标记和结束标记在某些情况下可以省略,并由其他标记暗示。) 元素可以具有属性,这些属性控制元素的工作方式。例如:超链接是使用 a 元素及其 href 属性形成的。

Markdown 语法

1
![图像说明](图像地址)

hugo-next-primary

HTML IMG 标签

1
<img src="图像地址" width="宽度" height="高度" />

SVG 格式

1
<svg>xxxxxx</svg>

列表类型

有序列表

  1. 第一个元素
  2. 第二个元素
  3. 第三个元素

无序列表

  • 列表元素
  • 另一个元素
  • 和其它元素

嵌套列表

借助 HTML 的 ul 元素来实现。

  • 第一项
  • 第二项
    • 第二项第一个子项目
    • 第二项第二个子项目
      • 第二项第二分项第一分项
      • 第二项第二分项第二分项
      • 第二项第二分项第三分项
    • 第二项第三个子项目
      1. 第二项第三分项第一分项
      2. 第二项第三分项第二分项
      3. 第二项第三分项第三分项
  • 第三项

自定义列表

通过 HTML 的 dl 元素还支持自定义列表(表格列表)。

Hugo 目录结构
assets
config.toml
content
data
theme
static
Hugo 模板
基础模板
列表模板
单页模板

块引用

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

引用文本 这一行也是同样的引用 同样你也在 blockquote 中使用 Markdown 语法书写

带有引文的 Blockquote 元素效果。

我的目标不是赚大钱,是为了制造好的电脑。当我意识到我可以永远当工程师时,我才创办了这家公司。

史蒂夫·沃兹尼亚克

根据 Mozilla 的网站记录,Firefox 1.0 于 2004 年发布,并取得了巨大成功。

表格

表格并不算是 Markdown 的核心要素,但 Hugo 同样支持它。

ID创建者模型年份
1HondaAccord2009
2ToyotaCamry2012
3HyundaiElantra2010

可以使用 : (英文格式冒号)来对表格内容进行对齐。

表格可以是很酷
左对齐居中右对齐
左对齐居中右对齐
左对齐居中右对齐

同样也可以在表格中使用 Markdown 语法。

表格使用Markdown 语法
斜体粗体中划线代码块

Code

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

其它元素: abbr、sub、sup、kbd等等

GIF 是位图图像格式。

H2O

C6H12O6

Xn + Yn = Zn

X获胜。或按CTRL+ALT+F显示 FPS 计数器。

比特作为信息论中的信息单位,也被称为 shannon ,以信息论领域的创始人 Claude shannon 的名字命名。

参考: