docs-public/projects/hugo/hugo_shortcodes.md

author, tags, title, description, date, lastmod

author	tags	title	description	date	lastmod
wompmacho		Hugo Special Markdown Codes	Available Shortcodes, and other resources for configuration.	2025-03-27	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.

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

Basic Syntax

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

Foldable Callouts

Use + for expanded by default or - for collapsed.

> [!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.

---