ermaozi

Appearance

Enhanced Markdown showcase

About 610 wordsAbout 2 min

MarkdownComponentsWriting

2026-08-03

This page demonstrates the main Markdown extensions included with the theme.

Text and tasks

Regular Markdown supports bold text, inline code, and marked text.

Callouts

Before publishing

Replace https://example.com with your real origin and verify every sitemap URL.

Collapses

Collapse panels support pointer and keyboard interaction.

Tabs

pnpm
pnpm install
pnpm

Shared state: pnpm

pnpm
pnpm install

Mermaid

Timeline

Initialize the project

Install dependencies and fill in the site configuration.

Step one

Write content

Organize pages with Markdown and theme components.

Step two

Build the site

Generate static files after all checks pass.

Step three

Steps and layout

  1. Install dependencies
  2. Write content
  3. Build the site

Responsive layout

Automatic wrapping

Window

ermaozi

Window containers support a title, height, and content gap.

npm run build

Code tree

Directory import example

src

index.ts

locale.ts

package.json

src/index.ts
import { locale } from './locale'

export const greeting = locale === 'zh-CN' ? '你好' : 'Hello'
src/locale.ts
export const locale = 'zh-CN'
package.json
{
  "name": "code-tree-example",
  "private": true
}

Icons

Iconify icons support inline size, color, and remote collection fallback:

Direct component syntax works too:

Provider shells: Iconify IconFont Font Awesome component

Responsive one
Responsive two
Responsive three
Custom title slot

Arbitrary title-slot content keeps the Markdown body.

QR code

Example site

Current page
Documentation

Multiple lines

Copyright Ownership:Site Author

This article link:https://astro.ermao.net/en/blog/markdown-showcase/

License under:Attribution 4.0 International (CC-BY-4.0)