insights/content/blog/tutorial/index.md

title	date	draft	description	noindex	pinned	nav_weight	series	categories	tags	images	authors
Tutorial	2023-03-31T11:47:31+08:00	false		false	true	1000	Tutorial	Content	Shortcode Code Block KaTex Mermaid Math Diagram		razonyang hugomods

A simple tutorial that offers samples and code snippets show how to create rich content, please refer to the documentations 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

hugo 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

```[lang]
CODE
```

{{% bootstrap/collapse "[lang]" %}} Replace [lang] with corresponding language identifier, such as js, php, go, html and so on. {{% /bootstrap/collapse %}}

console.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.

{{< bootstrap/config-toggle hugo >}} module: imports: - path: github.com/hbstack/syntax-highlighting/styles/github-dark {{< /bootstrap/config-toggle >}}

KaTex

```katex
MATH
```

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

Read more on KaTex Usage.

Mermaid

```mermaid
DIAGRAM
```

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

Read more on Mermaid Usage.

Shortcodes

Learn more on shortcodes.

Deployment

See deployment for deploying your site.