Tutorial

March 31, 2023 2 min read Content Tutorial Shortcode Code Block KaTex Mermaid Math Diagram

On this page

A simple tutorial that offers samples and code snippets show how to create rich content, please refer to the documentation for more usage.

Installation§

Please note that this theme requires Go installation the newest extended Hugo version.

Please check out the installation section.

Create Content§

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

The created content is in draft stage, you’ll need to publish the content by removing the draft or setting the draft as true on front matter. Learn on on content.

Code Block§

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

[lang]

Replace [lang] with corresponding language identifier, such as js, php, go, html and so on.

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

Code Syntax Highlighting Styles§

HB offers dozens of syntax highlighting styles, find more on syntax highlighting styles modules.

Import the desired style module and restart the Hugo server (load module’s assets fully) to preview.

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

    graph TD;
	  A-->B;
	  A-->C;
	  B-->D;
	  C-->D;

Shortcodes§

Learn more on shortcodes.

Deployment§

See deployment for deploying your site.