Demo: Shortcodes & Display Options
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:
- Choose an area
- Download the data
- Edit the features
- 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 tip callout, styled cyan.
A warning callout, styled yellow.
An alert callout, styled red.
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):
Hugo’s figure shortcode

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.