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

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

[lang]

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

1console.log('Hello world!')

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'

hugo.yaml

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

hugo.json

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

KaTex

1```katex
2MATH
3```

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

Mermaid

1```mermaid
2DIAGRAM
3```

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

Shortcodes

Learn more on shortcodes.

Deployment

See deployment for deploying your site.