---
author: wompmacho
tags: []
title: Hugo Special Markdown Codes
description: Available Shortcodes, and other resources for configuration.
date: '2025-03-27'
lastmod: '2025-03-28'
---

## Available Shortcodes

### Project Shortcodes

Custom shortcodes defined in `layouts/shortcodes/`.

*   **`include`**: Include a Markdown file into another. Supports absolute paths (mapped to `private/`) and relative paths (relative to Hugo content).
    *   Usage: `{{/*  include "private/bazel/plan.md"*/}}` or `{{/*  include "/srv/docs/private/bazel/plan.md"*/}}`
*   **`video`**: Embed local or remote videos.
    *   Usage: `{{/*  video src="path/to/video.mp4"*/}}`
*   **`rawhtml`**: Insert raw HTML content.
    *   Usage: `{{/*  rawhtml*/}}<div>Your HTML here</div>{{/*  /rawhtml*/}}`

### Theme Shortcodes (Blowfish)
Commonly used shortcodes from the [Blowfish theme](https://blowfish.page/docs/shortcodes/).

*   **`alert`**: Display a callout/alert box.
    *   Usage: `{{/*  alert icon="circle-info"*/}}Your message here.{{/*  /alert*/}}`
*   **`badge`**: Display a small badge.
    *   Usage: `{{/*  badge*/}}New{{/*  /badge*/}}`
*   **`icon`**: Display an icon from the theme's icon set.
    *   Usage: `{{/*  icon "github"*/}}`
*   **`button`**: Create a styled button.
    *   Usage: `{{/*  button href="https://google.com" target="_self"*/}}Click Me{{/*  /button*/}}`
*   **`mermaid`**: Render Mermaid.js diagrams.
    *   Usage: `{{/*  mermaid*/}}graph TD; A-->B;{{/*  /mermaid*/}}`
*   **`timeline`**: Create a vertical timeline.
    *   Usage: `{{/*  timeline*/}}{{/*  timelineItem ...*/}}{{/*  /timeline*/}}`

---

## Markdown Callouts (Admonitions)

We use `hugo-admonitions` which follows the [GitHub/Obsidian alert syntax](https://github.com/orgs/community/discussions/16925).

### Basic Syntax

```markdown
> [!TYPE] Title (Optional)
> Content here.
```

### Foldable Callouts

Use `+` for expanded by default or `-` for collapsed.
```markdown
> [!TYPE]+ Foldable Title
> This callout is expanded by default.
```

### Supported Types

The following types are mapped to specific icons and colors:

| Type        | Icon            | Description                               |
| :---------- | :-------------- | :---------------------------------------- |
| `note`      | Pen             | General information (default).            |
| `abstract`  | Lines           | Summaries or abstracts.                   |
| `info`      | Info Circle     | Informational notes.                      |
| `tip`       | Lightbulb       | Helpful tips or suggestions.              |
| `success`   | Check Circle    | Successful outcomes or "done" states.     |
| `question`  | Question Circle | Questions or areas needing clarification. |
| `warning`   | Triangle Excl.  | Warnings to pay attention to.             |
| `failure`   | X Circle        | Failed outcomes.                          |
| `danger`    | Triangle Excl.  | Critical warnings.                        |
| `bug`       | Bug             | Known issues or bugs.                     |
| `example`   | Teacher         | Examples and use cases.                   |
| `quote`     | Quote           | Important quotes.                         |
| `important` | Excl. Circle    | Critical information.                     |
| `caution`   | Triangle Excl.  | Use with caution.                         |
| `todo`      | List Check      | Tasks or items to be done.                |
| `hint`      | Lightbulb       | Hints or clues.                           |

---