Demo: Shortcodes & Display Options

Posted on Aug 17, 2026
tl;dr: A living reference of every shortcode and markdown display feature available on this site, styled with Archie.

This page exists purely as a reference — it isn’t linked from the nav, and it’s marked hidden: true so it stays out of the homepage feed. You can always reach it directly at /docs/demo/.

Since this page isn’t Type: page (it lives under /docs/), it gets the full single-page treatment: a “Posted on” date, a tags list, a tldr line, and — because toc: true is set — a table of contents in the sidebar. All four of those are visible right now, live, on this very page.

Headings

H1 heading

H2 heading

H3 heading

H4 heading

H5 heading
H6 heading

Archie prefixes every heading with a red markdown symbol via CSS (h1::before { content: '# '; } and so on) — that’s not literal # characters in this text, it’s generated automatically for every heading on the site.

Text formatting

Bold text, italic text, bold italic, strikethrough, and inline code.

A regular link — Archie underlines links with a solid red bottom border at rest, and inverts to a solid red fill with white text on hover/focus.

Blockquote

“Downfallnotes is a place to organize (and try to remember!) thoughts from my strolling.”

Lists

Unordered (Archie renders these with a bold red asterisk marker instead of a bullet):

  • Fallen trees on the trail
  • Sticky geoprocessing puzzles
  • Both take care to work around

Ordered:

  1. Choose an area
  2. Download the data
  3. Edit the features
  4. Submit your work

Table

Format Extension Tool
File Geodatabase .gdb ogr2ogr
Shapefile .shp ogr2ogr
GeoPackage .gpkg ogr2ogr

Horizontal rule


Code blocks & language badges

Archie stamps a colored language badge on any fenced code block where it recognizes the language:

ogr2ogr -progress -f "FileGDB" -sql "SELECT * FROM cn_osm_secondary" cn_secondary_rds.gdb PG:"host=localhost user=jrobertson dbname=osm_chinyc"
def humanize(name: str) -> str:
    return name.replace("-", " ").title()
const humanize = (name) => name.replace(/-/g, " ");
func Humanize(name string) string {
	return strings.Title(strings.ReplaceAll(name, "-", " "))
}
.book-menu { flex: 0 0 300px; }
<a href="/about/">About</a>
{ "title": "Demo", "tags": ["demo"] }
title: Demo
tags: [demo]

Archie’s callout shortcode

💡 A default callout — just a plain colored box.
🔎 Tip
A tip callout, styled cyan.
⚠️ Warning
A warning callout, styled yellow.
🚨 Alert
An alert callout, styled red.
🗺️ Custom callout
Custom callouts take their own emoji, title, and inline style.

Custom button shortcode

This site has one custom shortcode, added at the site level so it works under any theme (layouts/_shortcodes/button.html):

Visit cairncarto

Hugo’s figure shortcode

Portrait photo

Figure shortcode with a title/caption

Hugo’s youtube shortcode

Hugo’s qr shortcode

Generates a QR code image with no external service — this one encodes the site’s own URL:

Hugo’s param shortcode

Pulls a value straight from front matter or site config. This site’s tagline, via {{% param "subtitle" %}}:

thoughts from wandering through the downfall–digital and on the trail.

Hugo’s ref shortcode

Resolves a link to another page by file path rather than a hardcoded URL, so it stays correct if the page moves. This links to the About page using {{% ref "about.md" %}}.

Built-in shortcodes not embedded here

These need a live external ID (a real tweet, gist, or Instagram post) to render anything, so rather than embed placeholder/fake content, here’s the syntax for reference:

{{< gist spf13 7896402 >}}

{{< x user="SanDiegoZoo" id="1453110110599868418" >}}

{{< instagram CxOWiQNMbue >}}

{{< vimeo 55073825 >}}

What’s demonstrated only via this page’s front matter

  • tldr — the italic summary line at the very top of this page.
  • toc: true — the table of contents in the sidebar.
  • tags — the tag(s) shown right below the date.
  • date — falls back to this file’s git commit date if none is set manually, per this site’s [frontmatter] config.
  • hidden: true — keeps this page out of the homepage feed without removing it from /tags/demo/ or breaking its direct URL.