Markdown Guide & Syntax

HugoBlox supports GitHub Flavored Markdown (GFM) along with powerful extensions for diagrams, math, and shortcodes.

Basic Formatting

Text Styles

Style	Syntax	Result
Bold	**Bold**	Bold
Italic	*Italic*	Italic
Strikethrough	~~Strikethrough~~	Strikethrough
Code	`Code`	Code
Link	[Link](url)	Link

Lists

Unordered

- Item 1
- Item 2
  - Sub-item

Ordered

1. First
2. Second
3. Third

Task List

- [x] Done
- [ ] To Do

Quotes

> This is a blockquote.
>
> It can span multiple lines.

Advanced Features

Math (LaTeX)

Render beautiful mathematical equations using KaTeX. Enable math: true in your front matter.

Inline: $E = mc^2$

$E = mc^2$

Block:

$$E = mc^2$$

$$
E = mc^2
$$

Diagrams (Mermaid)

Visualize flowcharts, graphs, and more using Mermaid.

graph TD;
    A[Start] --> B{Is it working?};
    B -- Yes --> C[Great!];
    B -- No --> D[Debug];

```mermaid
graph TD;
    A[Start] --> B{Is it working?};
    B -- Yes --> C[Great!];
    B -- No --> D[Debug];
```

Code Blocks

Syntax highlighting is built-in.

def hello():
    print("Hello, World!")

```python
def hello():
    print("Hello, World!")
```

Alerts / Callouts

Use standard blockquotes with specific indicators for styled alerts.

[!NOTE] Useful information that users should know.

[!TIP] Helpful advice for doing things better.

[!IMPORTANT] Key information users need to know to achieve their goal.

[!WARNING] Urgent info that needs immediate user attention to avoid problems.

[!CAUTION] Advises about risks or negative outcomes of certain actions.

> [!NOTE]
> Useful information that users should know.

Shortcodes

HugoBlox includes custom shortcodes to enhance your content.

Call-to-Action (CTA)

{{< cta cta_text="Get Started" cta_link="/get-started" >}}

Icon

{{< icon name="hero/rocket" >}}

Figure / Image

{{< figure src="image.jpg" caption="My Image" >}}

Tip

For a full list of Hugo shortcodes, refer to the Hugo Documentation.