指南

2023年3月31日 1 分钟阅读 Content Tutorial Shortcode Code Block KaTex Mermaid Math Diagram

本页内容

本教程提供简单的示例和代码段，以展示如何创建富文本，更多用法请查阅文档。

安装§

请注意本主题需要安装 Go 和最新的扩展版 Hugo。

详情请阅读安装一文。

新增内容§

1hugo new blog/new-post/index.md
sh

新创建的内容处于草稿状态，发布时需要移除 draft参数或者将其设为 false。

请指定 --buildDrafts (-D) 标识以预览草稿，如 hugo server --gc -D --disableFastRender。

class="blockquote border-start ps-3 py-1 border-primary border-4"> <p><strong>npm run dev</strong> 默认会构建草稿内容。</p>

代码块§

1```[lang]
2CODE
3```
markdown

[lang]

请将 [lang] 替换为对应的语言标识，如 js、php、go、html 等。

1console.log('Hello world!')
js

代码高亮样式§

HB 提供了数十个代码高亮样式，详情请参阅代码高亮样式模块。

导入对应的样式模块，并重启 Hugo 服务器以完整地载入模块的资源。

hugo.toml

1[module]
2  [[module.imports]]
3    path = 'github.com/hbstack/syntax-highlighting/styles/github-dark'
toml

hugo.yaml

1module:
2  imports:
3  - path: github.com/hbstack/syntax-highlighting/styles/github-dark
yaml

hugo.json

1{
2   "module": {
3      "imports": [
4         {
5            "path": "github.com/hbstack/syntax-highlighting/styles/github-dark"
6         }
7      ]
8   }
9}
json

KaTex§

1```katex
2MATH
3```
markdown

f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi

Mermaid§

1```mermaid
2DIAGRAM
3```
markdown

短代码§

详情请参阅短代码。

部署§

领请参阅部署以部署你的站点。