Extensions

Use {{< toc >}} Hugo shortcode to generate table of contents:

Table Of Contents

Checklist

Code highlighting

Use highlight shortcode or Markdown-style code fences with attributes to highlight regions, set line numbers etc.

go {linenos=inline,hl_lines=[8,"15-17"],linenostart=199}

199// GetTitleFunc returns a func that can be used to transform a string to
200// title case.
201//
202// The supported styles are
203//
204// - "Go" (strings.Title)
205// - "AP" (see https://www.apstylebook.com/)
206// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
207//
208// If an unknown or empty style is provided, AP style is what you get.
209func GetTitleFunc(style string) func(s string) string {
210  switch strings.ToLower(style) {
211  case "go":
212    return strings.Title
213  case "chicago":
214    return transform.NewTitleConverter(transform.ChicagoStyle)
215  default:
216    return transform.NewTitleConverter(transform.APStyle)
217  }
218}

Mermaid diagrams

You can use Mermaid diagrams in your posts. Just write the diagram definition in a fenced code block with mermaid language identifier:

graph LR; A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]

Unsafe

Sometimes you might want to render plain HTML code:

Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>

Use {{< unsafe >}} YOUR TEXT {{< /unsafe >}} shortcode for that:

Please press Ctrl + Shift + R

Math

If you want to use KaTeX-based math rendering in your posts, set math = true in the post front matter or in the site config. Then you can use LaTeX syntax to write math equations ($$ for display mode, \( and \) for inline mode):

$$ i \hbar \frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \hat H \Psi(\mathbf{r},t) $$

And also \(x = 42\) for inline equations.

Default Hugo shortcodes

You can use all the built-in Hugo shortcodes in your posts. Here are some examples:

Gist

YouTube

Twitter