这篇文章集中说明本人博客主题所支持的 Markdown 语法和 Hugo Shortcodes插件,你也可以在这里预览到他们的样子。如果你不喜欢某些部分的样式,可以去修改 content.scss
和 shortcodes.scss
这两个文件。预告一下,我所用的这个名为 Nuo
的 Hugo
也将于近期发布,敬请期待。
1. 标题
H1
H2
H3
H4
H5
H6
2. 段落
使用单引号 或者单下划线 _
标记 斜体强调 或者 斜体强调
使用两个引号 **
或者两个下划线 __
标记 加粗强调 或者 加粗强调
引号和下划线可叠加使用 → 只是加粗 斜体并加粗
使用两个波浪线 ~~
标记 已删除文字
插入文字暂无 Markdown
标记,直接使用 HTML
标签 <ins>
标记 插入文字
行内代码使用反引号标记 → print("hello world")
上标 X2 / 下标 X2
H2O
按键 CtrlAlt
外链[chekun’s blog
页面内段落 图片
注意:你可以通过 {#section-id}
方式自定义段落锚点
我[1]是额
引用文献:
数字引用 编号为 1 的链接
3. 列表
以下的无序、有序和任务列表均支持二级嵌套,不建议使用二级以上嵌套。
3.1 无序列表
- 无序列表
- 嵌套的无序列表
- 嵌套的无序列表
- 无序列表
- 嵌套的有序列表
- 嵌套的有序列表
- 无序列表
3.2 有序列表
- 有序列表
- 嵌套的有序列表
- 嵌套的有序列表
- 有序列表
- 嵌套的无序列表
- 嵌套的无序列表
- 有序列表
3.3 定义列表
- CSS
- 层叠样式表
3.4 任务列表
- Cmd Markdown 开发
- 七月旅行准备
- 准备邮轮上需要携带的物品
- 浏览日本免税店的物品
- 购买蓝宝石公主号七月一日的船票
4. 引用
野火烧不尽,春风吹又生。
– 白居易《赋得古原草送别》
5. 代码
以本站的一段 JavaScript
代码做演示。
// Initialize video.js player
if (document.getElementById('my-player') !== null) {
/* eslint-disable no-undef */
videojs('#my-player', {
aspectRatio: '16:9',
fluid: true,
});
}
中间能写字的分割线,如果你修改了分割线中字的内容,请配合修改 CSS
样式。
7. 图片
不带标题的图片,如下图👇
带标题的图片(zoomable),如下图👇
8. 表格
使用 Markdown
画的表格,如下表👇
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
使用 HTML
画的表格,如下表👇
注意:下表叠加应用了 is-centered
is-striped
is-bordered
is-narrow
四种表格样式。
9. 数学公式
主题使用了 MathJax 开源库来实现对数学公式的支持,使用 $$
标记。
$$ \left{ \begin{aligned} N & = pq \ \varphi(n) & = (p-1)(q-1)\ \end{aligned} \right. \Rightarrow N - \varphi(n) + 1 = p + q $$
10. JSFiddle
引入 JSFiddle 网站的代码范例,在主题目录 layouts/shortcodes
文件夹下的 jsfiddle.html
对该标签进行定义。
11. Codepen
引入 Code Pen 网站的代码演示,在主题目录 layouts/shortcodes
文件夹下的 codepen.html
对该标签进行定义。
12. 声享 PPT
引入 声享 PPT 演示文稿,在主题目录 layouts/shortcodes
文件夹下的 shengxiang.html
对该标签进行定义。
13. 本地视频
主题使用了 video.js 播放视频文件,你还可以自己定义视频的封面,在主题目录 layouts/shortcodes
文件夹下的 video.html
对该标签进行定义。
14. 网易云音乐
主题文章中可以轻松插入 网易云音乐 的指定音乐,你可以根据需要将音乐设置为自动播放,在主题目录 layouts/shortcodes
文件夹下的 music.html
对该标签进行定义。
注意:由于版权问题,网易已经禁止外站分享版权音乐,该 shortcode 已经无法正常使用。
15. Gist 代码片段
除了本地的代码片段,主题中可使用 GitHub 的 Gist 服务轻松插入代码片段。
16. Tweet
由于不明原因可能无法访问。
17. YouTube
由于不明原因可能无法播放。
18. Instagram
由于不明原因可能无法访问。
文章更新
2017年9月8日
支持行内的数学公式,使用标记 $
包裹公式,如下:
When \(a \ne 0\)
, there are two solutions to $ax^2 + bx + c = 0$
and they are