Shortcodes

The Neso theme optimizes Hugo’s shortcodes to make your posts vivid and polished.
October 8, 2025 Translations: 
Table of Contents

About shortcodes

Hugo provides several quick syntaxes beyond what Markdown supports, called “shortcodes”, which make it easy to insert/embed richer media in your content.

This theme fine‑tunes the appearance of those shortcodes. Below we show how they render in practice; for detailed usage, see the Hugo documentation.

HTML <details> element

Insert the shortcode in Markdown:

{{< details summary="Details shortcode demo" >}}
This is the content shown after expanding; you can also write **Markdown** here.
{{< /details >}}

Rendered result:

Details shortcode demo

This is the content shown after expanding; you can also write Markdown here.

HTML <figure> element

Insert the shortcode in Markdown:

{{< figure
  src="img_demo.jpg"
  alt="Afternoon sunlight reflecting on the building’s glass facade"
  loading="lazy"
  title="HDR image test"
  caption="See the gleaming photo? Congrats! your browser supports HDR images! – Photo by "
  attr="babeneso"
  attrlink="https://instagram.com/babeneso"
>}}
{{/* Some attributes are optional; you don’t have to set them all. */}}

Rendered result:

Afternoon sunlight reflecting on the building’s glass facade

HDR image test

See the gleaming photo? Congrats! your browser supports HDR images! – Photo by babeneso

Inline syntax highlighting (enhanced)

You can already wrap text in Markdown with a pair of backticks ` to show inline code, like this: const number = 42;. However, the native approach does not apply syntax highlighting. In that case, use this shortcode instead:

{{< highlight javascript "hl_inline=true" >}}const number = 42;{{< /highlight >}}

Rendered result:

const number = 42;

Inline code simply means it can be written inline with text, like this: const number = 42;, without needing its own block… uh‑oh, am I redeclaring this constant over and over?

Warning

Before using this shortcode, you must configure Chroma (the syntax highlighter) as described here; otherwise the highlighting will not render correctly.

YouTube video

Insert the shortcode in Markdown:

{{< youtube jVhlJNJopOQ >}}

Rendered result:

Instagram post

Insert the shortcode in Markdown:

{{< instagram DNYXvbczqGL >}}

Rendered result:

X post

Insert the shortcode in Markdown:

{{< x user="Kurz_Gesagt" id="1889702410852925900" >}}

Rendered result: