Markdown syntax support

A compact showcase of Markdown and prose styles in Serene — headings, callouts, code, tables, math, and more.

Published
Reading
2 min
Category
Reference
Tags
markdown reference
On this page
  1. Basic syntax
  2. Emphasis
  3. Links
  4. Lists
  5. Blockquote
  6. Callouts
  7. Horizontal rule
  8. Code
  9. Tables
  10. Math
  11. Keyboard and marks
  12. Images

Basic syntax

Emphasis

Italic, bold, bold italic, strikethrough, and inline code.

Internal: Welcome to Serene. External: Astro.

Lists

Unordered:

  • One
  • Two
    • Nested
  • Three

Ordered:

  1. Open an article
  2. Press ⌘K to search
  3. Toggle the theme

Blockquote

Gunshot, thunder, sword rise. A scene of flowers and blood.

A quiet page can still carry a loud idea.

Blockquotes can contain emphasis, links, and inline code.

Callouts

Use a blockquote marker to add a structured note. Labels are case-insensitive, and [!tips] maps to the tip style. Add a title after the marker when the default label is not enough.

Add - to start closed, or + to start open. Both forms use native details controls, so their state works without client-side scripts:

Check this before publishing

This content stays quiet until the reader chooses to open it.

This note starts open

Custom titles preserve inline Markdown, including code and emphasis.

Horizontal rule


Code

Short blocks stay expanded:

const theme = 'serene'
console.log(`hello, ${theme}`)

Longer blocks get a collapse control in the theme UI:

// Sample multi-line snippet for collapse testing
export type NavItem = { label: string; href: string }

export function isActive(pathname: string, href: string): boolean {
  if (href === '/') return pathname === '/'
  return pathname === href || pathname.startsWith(`${href}/`)
}

export function formatTitle(
  pageTitle: string | undefined,
  siteTitle: string,
  delimiter: string
): string {
  if (!pageTitle) return siteTitle
  return `${pageTitle} ${delimiter} ${siteTitle}`
}

// padding lines so the block is long enough to collapse
const lines = Array.from({ length: 12 }, (_, i) => `line-${i + 1}`)
console.log(lines.join('\n'))

Tables

FeatureNotes
Dark modedata-theme on <html>
SearchPagefind after build
CommentsOpt-in Waline

Math

Inline math uses single dollar signs, such as E=mc2E = mc^2.

Display math uses a double-dollar block:

01x2dx=13\int_0^1 x^2\,dx = \frac{1}{3}

Keyboard and marks

Use Ctrl + K (or ⌘K) for search. Highlighted text uses the theme mark style when available.

Images

Local assets via relative path:

Soft blue horizon

Click the image to zoom (unless marked data-no-zoom on heroes).

Author
Serene
Published

Images are sourced from the internet. Please contact me for removal if necessary.

Type to search posts and pages.

K to open · esc to close Search by Pagefind