增强 Markdown 展示

这个页面覆盖主题内置的主要 Markdown 扩展，可作为写作速查表。

文本与任务

普通 Markdown 支持加粗、行内代码 和重点标记。

行内注释需要点击图标查看补充内容。

配置站点信息
写一篇示例文章
替换示例内容

提示框

发布前检查

请把 https://example.com 换成真实域名，并确认 sitemap 中的链接正确。

折叠面板

折叠面板支持点击、键盘操作和手风琴模式。

标签页

pnpm

pnpm install

npm

npm install

pnpm

共享状态：pnpm

npm

共享状态：npm

npm

npm install

pnpm

pnpm install

yarn

yarn install

Mermaid

时间线

初始化项目

安装依赖并填写站点配置。

第一步

编写内容

使用 Markdown 和主题组件组织页面。

第二步

构建发布

完成检查后生成静态文件。

第三步

图片卡片与瀑布流

主题图片卡片

Theme Author | 2026年8月5日

悬停信息区域可查看完整描述。

响应式一

响应式二

响应式三

自定义标题插槽

任意标题插槽内容仍保留 Markdown 正文。

短卡片

适合放置简短摘要。

较长卡片

瀑布流会根据每项渲染后的高度，将内容放入当前最短的列。

它支持卡片、图片、代码块等普通 Markdown 内容。

第三张卡片

窗口尺寸变化后会重新计算列布局。

步骤与布局

安装依赖

选择 npm、pnpm 或 Yarn。
编写内容

使用 Markdown 维护页面。
构建站点

输出可直接托管的静态文件。

响应式布局

支持自动换行

窗口

ermaozi

窗口容器支持标题、高度和内容间距。

npm run build

代码树

示例项目

src

index.ts

config.ts

package.json

src/index.ts

export const theme = 'plume'

src/config.ts

export const locale = 'zh-CN'

package.json

{ "scripts": { "build": "astro build" } }

目录导入示例

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
}

包状态徽章

图标

Iconify 图标支持尺寸、颜色和远程集合回退：

直接组件语法同样可用：

提供器外壳：Iconify IconFont Font Awesome 组件

二维码

示例站点

当前页面

文档首页

多行文本

局部内容加密

请输入演示密码 246810

文件引入与代码导入

被引入的 Markdown

这段内容来自独立的 .snippet.md 文件，并在构建时展开。

export const theme = 'ermaozi'
export const renderer = 'astro'
export const output = 'dist'

多包管理器命令

pnpm

pnpm add --save-dev astro

yarn

yarn add --dev astro

npm

npm install astro --save-dev

版权所有

版权归属：Site Author

本文链接：https://astro.ermao.net/blog/markdown-showcase/

许可证：署名 4.0 国际 (CC-BY-4.0)