Tutorial

A simple tutorial that offers samples and code snippets show how to create rich content.

Installation

Please note that this theme requires 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.

Code Block

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

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

In addition to Hugo built-in shortcodes, HB integrated the Bootstrap module, which ships several useful shortcodes: