Markdown examples

Common authoring snippets and rendered PreactPress Markdown extensions.

Code#

export function greet(name: string) {
  return `Hello, ${name}!`
}

Highlight a single line with fence meta ({2}) or inline notation:

export function greet(name: string) {
  return `Hello, ${name}!`; 
}

Inline code like themeConfig.outline uses the same theme tokens as code blocks.

Reuse source files instead of duplicating code:

export function greet(name: string) {
  return `Hello, ${name}!`;
}

The @/ prefix resolves from the site content root (srcDir).

Syntax	Result
`# Title`	Heading
`---` frontmatter	Page metadata

:::: tip ::: tip, ::: warning, ::: danger, ::: info, and ::: details work like VitePress custom containers. ::::

:::: warning Optional title You can pass a custom title after the container type. ::::

:::: details Learn more Details blocks render as native <details> elements. ::::

GitHub-flavored alert syntax renders with the same styling as custom containers:

NOTE

Useful information that readers should know.

TIP

Optional advice for doing things more easily.

WARNING

Critical content that needs immediate attention.

Append {#id} to any heading to control its anchor.

PreactPress supports :tada: and :rocket: shortcodes out of the box.

Content below the inline TOC.

Nested heading for the outline.

:::: code-group

pnpm add -D @kamod-ch/preactpress

npm install --save-dev @kamod-ch/preactpress

::::

Use includes for shared fragments or selected line ranges:

Reuse shared fragments with HTML comments:

Shared fragment

This note is pulled in via .

This starter enables both options: 🚀

Inline math: $E = m c^{2}$