Headings

Headings are the skeleton of your content. If these look wrong, everything else will feel slightly cursed.

Heading level 3 (H3)

Your everyday heading. Dependable. Trustworthy.

Heading level 4 (H4)

Still important. Slightly quieter.

Heading level 5 (H5)

Used when you’re getting serious — or very specific.

Heading level 6 (H6)

If you’re here, you either love structure or made a wrong turn.

Small text — legally tiny, emotionally significant.

Paragraphs & emphasis

This is a standard paragraph of body text. It should feel calm, readable, and never make the reader think “why does this feel off?”

Bold text is emphasis, not shouting.
Italic text adds tone.
Bold italic exists mostly to test your CSS.

Inline code should feel natural, like it belongs in the sentence.

Sometimes you need to highlight something important because future-you will absolutely forget.

Keyboard input

Keyboard shortcuts are sacred.

Press Ctrl + C to copy.
Press Ctrl + Alt + T to open the terminal (and feel powerful for 0.3 seconds before typing ls again).

Abbreviations

Hover-friendly, context-saving goodness.

CSS
HTML

Blockquotes

For quotes, specs, or things someone said once and now denies.

I fixed it by changing one line.
I no longer remember which line.

— Every Linux user, eventually

Callouts / Admonitions

This is a note callout. Calm. Helpful. Non-threatening.
This is a tip callout. Wisdom earned the hard way.
This is a warning callout. Pause. Read twice.
This is a danger callout. Something will break.

Lists

Unordered list

  • First item
  • Second item
    • Nested item
    • Another nested item
  • Third item

Ordered list

  1. First step
  2. Second step
  3. Third step (confidence fading)

Task lists

Because ticking boxes feels productive.

  • Write style post
  • Style everything
  • Double-check edge cases
  • Celebrate quietly

Definition lists

Term
A concise explanation of the term.
Another term
More detail for clarity.

Code blocks

Plain preformatted block

This is a plain preformatted block.
Perfect for logs or quiet despair.

Syntax highlighted code

#!/usr/bin/env bash

SITE_DIR="$(pwd)"
PORT=4000

echo "Starting site build in $SITE_DIR..."

if ! command -v bundle >/dev/null 2>&1; then
  echo "Error: Bundler is not installed."
  exit 1
fi

# Verifies Gems and install
bundle check || bundle install

# Generate a static site from your Jekyll project
bundle exec jekyll build

# Build the site and make it available on a local server
bundle exec jekyll serve --port "$PORT" --livereload

# Last Comment, you found the "show more" button, hurrah!

.post-content {
  max-width: 65ch;
  line-height: 1.7;
}


{% if post.tags.size > 0 %}
  <span class="post-tags">
    {% for tag in post.tags %}
      <span class="tag">{{ tag }}</span>
    {% endfor %}
  </span>
{% endif %}

GitHub-style diffs

- const apiEndpoint = "https://api.oldservice.com";
+ const apiEndpoint = "https://api.newservice.com";

Mermaid - diagramming and charting

Live Editor

Pie Chart

pie title Server Storage "Logs" : 40 "Backups of Backups" : 25 "Stuff Nobody Remembers Deploying" : 20 "The Actual App" : 15
Storage utilisation as explained during postmortems

Sequence Diagram

sequenceDiagram User ->> Web: Clicks Button Web ->> API: Please do the thing API -->> Auth: Is this user allowed? Auth -->> API: Probably API ->> Database: Query Database -->> API: Slow response API ->> Cache: Do you have this? Cache --x API: Nope API -->> User: 500 Internal Server Error
Normal production request lifecycle

Flowchart

flowchart LR A((Monitoring Alert)) --> B{Is it on fire?} B -- Yes --> C[Restart Service] B -- No ----> E C --> D{Did that fix it?} D -- Yes --> E[Close Ticket] D -- No --> F[Blame DNS]
Its always DNS

Mindmap

mindmap root((FOSS Tool)) Idea "Solves my problem" "Might solve yours" Code Works 🤩 Community Users **Maintainers**
It solves my problem, it might solve yours!

Timeline

timeline title Infrastructure Timeline 2020 : Temporary setup 2021 : Still temporary 2022 : Added monitoring 2023 : Added more monitoring 2024 : Decided it's "production"
Nothing is more permanent than a temporary solution

Revisions

The original implementation used a global configuration file now uses scoped configuration, which everyone agreed was obvious later.

Tables

Feature Supported Notes
Headings Yes All levels styled
Code Yes Copy button
Media Yes Responsive
Details Yes Animated

Images

Terminal output Deployment succeeded. No idea why.

Figures

Abstract diagram
Semantic figure with caption.

Details / Summary

Expandable section

Hidden content revealed on demand.

Superscript & subscript

H2O — required for humans, optional for servers.
x2 — grows faster than your log files.

Status tags

Active Updated Completed Archived

Media

Video

Native HTML5 video.

Audio

Embedded audio player.

Footnotes

Here is a sentence with a footnote reference that seems important at the time.1

Another sentence that probably didn’t need a footnote, but here we are.2

Address

Written by a developer who really wants consistent styling.

Final thoughts

If everything in this post looks calm, readable, and intentional, your theme is in a really good place.

Keep this page around as a friendly checkpoint — a visual regression test, a styling reference, and a small reminder that you took the time to make things feel nice for future readers (including future-you).

  1. This footnote was added after someone said “we should probably explain that” but nobody remembers what that was anymore. ↩

  2. Verified on Linux, untested on Windows, absolutely broken on a Friday afternoon. ↩