Markdown & Syntax Highlighting

This post is a reference for the markdown features available when writing posts.

Headings, emphasis, and links

You get bold, italic, inline code, and links. Headings (##, ###) automatically get anchor ids so they can be linked to.

Lists

• Unordered item one
• Unordered item two
  • A nested item

1. Ordered item one
2. Ordered item two

Code blocks

Fenced code blocks are highlighted with Shiki using the one-dark-pro theme:

import { $, collect } from "@effex/dom";

export const Counter = (count: number) =>
  $.button(
    { class: "rounded bg-indigo-600 px-3 py-1 text-white" },
    $.of(`Count: ${count}`),
  );

.prose pre {
  border-radius: 0.5rem;
  overflow-x: auto;
}

Tables

Feature	Supported
Headings	✅
Code blocks	✅
Tables	✅
Blockquotes	✅

That covers the basics.