Hugo Book

- Introduction: https://hugo-book-demo.netlify.app/docs/getting-started/introduction/
- Create a Site: https://hugo-book-demo.netlify.app/docs/getting-started/create-a-site/
- Configuration: https://hugo-book-demo.netlify.app/docs/getting-started/configuration/
- Organisation: https://hugo-book-demo.netlify.app/docs/content/organisation/
- Pages: https://hugo-book-demo.netlify.app/docs/content/pages/
- Menus: https://hugo-book-demo.netlify.app/docs/content/menus/
- Blog: https://hugo-book-demo.netlify.app/docs/content/blog/
- Multi-Language: https://hugo-book-demo.netlify.app/docs/content/multilingual/
- Shortcodes: https://hugo-book-demo.netlify.app/docs/content/shortcodes/
- Asciinema: https://hugo-book-demo.netlify.app/docs/content/shortcodes/asciinema/
- Badges: https://hugo-book-demo.netlify.app/docs/content/shortcodes/badges/
- Buttons: https://hugo-book-demo.netlify.app/docs/content/shortcodes/buttons/
- Cards: https://hugo-book-demo.netlify.app/docs/content/shortcodes/cards/
- Columns: https://hugo-book-demo.netlify.app/docs/content/shortcodes/columns/
- Details: https://hugo-book-demo.netlify.app/docs/content/shortcodes/details/
- Hints: https://hugo-book-demo.netlify.app/docs/content/shortcodes/hints/
- Images: https://hugo-book-demo.netlify.app/docs/content/shortcodes/images/
- Mermaid: https://hugo-book-demo.netlify.app/docs/content/shortcodes/mermaid/
- Steps: https://hugo-book-demo.netlify.app/docs/content/shortcodes/steps/
- Tabs: https://hugo-book-demo.netlify.app/docs/content/shortcodes/tabs/
- KaTeX: https://hugo-book-demo.netlify.app/docs/content/shortcodes/katex/
- Styles: https://hugo-book-demo.netlify.app/docs/customization/styles/
- Inject Partials: https://hugo-book-demo.netlify.app/docs/customization/inject-partials/


# Shortcodes

Hugo Book includes shortcodes for common documentation patterns. All interactive shortcodes work without JavaScript using CSS-only techniques.

Hugo shortcodes use two delimiter styles:

`{{</* shortcode */>}}`
: Renders inner content as plain HTML. Use for shortcodes that don't contain markdown.

`{{%/* shortcode */%}}`
: Processes inner content as markdown. Use when the shortcode body contains markdown formatting.

> [!NOTE]
> Use `{{%/* shortcode */%}}` when the body contains markdown that needs to be rendered. `{{</* shortcode */>}}` passes content as-is without markdown processing.
> When nesting shortcodes (e.g. tabs inside columns), the outer shortcode must use `{{%/* shortcode */%}}` for the inner shortcodes and markdown to be processed.