Markdown

Working with Images

letsblaze handles images with a custom render hook that adds <figure> and <figcaption> support and automatic dimension detection for page-bundle images.

Page bundles

The recommended way to use images is as page bundles — store the image alongside the content file:

content/
  blog/
    working-with-images/
      index.md        ← this file
      hero.jpg        ← image in the same directory

This is a leaf bundle. Hugo can read the image dimensions at build time and emit width and height attributes automatically, preventing layout shift (CLS).

letsblaze uses Hugo’s built-in Chroma syntax highlighter, configured to emit inline styles rather than CSS classes. This means syntax highlighting works with no external stylesheet — consistent with the theme’s no-external-resources philosophy.

Inline code

Wrap short code references in backticks: const x = 42.

Fenced code blocks

Use triple backticks with a language identifier:

def greet(name: str) -> str:
    return f"Hello, {name}"

print(greet("world"))

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <p>Hello, world.</p>
  </body>
</html>

hugo new blog/my-post.md
hugo server --buildDrafts
hugo --minify

Syntax style

letsblaze is opinionated: the default Chroma style is monochrome. This works in both light and dark mode without maintaining two colour palettes.

Writing Content

letsblaze renders standard Markdown with a few additions. This post covers everything available when writing content.

Headings

<h1> is reserved for the page title, rendered automatically by the theme. Use <h2> through <h6> for section headings within content.