以下组件覆盖了原生 HTML 标签,在 MDX 中使用对应的 Markdown 语法即可自动生效。
普通 Markdown 链接语法即可,内部链接走 Next.js 客户端导航,外部链接自动在新标签页打开并显示外链图标。
内部链接 — 使用 Next.js Link 组件,不会整页刷新。
外部链接 — 自动在新标签页打开,并显示外链图标。
标准 Markdown 图片语法,基于 Next.js Image 自动优化(懒加载、响应式尺寸)。alt 中包含 "hero" 或 "cover" 的图片会自动预加载。
标准 Markdown 引用语法,自动添加引用图标和左侧边框。
这是一段普通引用文字,带有左侧边框和引用图标。
使用 HTML <kbd> 标签:
快捷键:Ctrl + C 复制,Ctrl + V 粘贴,Ctrl + S 保存。macOS 上使用 Cmd 键。
标准 Markdown 代码块和行内代码语法,构建时通过 Shiki 自动注入语法高亮。代码块标题栏显示语言标签和复制按钮。
行内代码使用反引号:npm install 安装依赖。
语言标签自动显示在标题栏:
在代码块元数据中使用 title="..." 指定文件名,会显示在标题栏替代语言标签:
使用 Shiki 的 notation 语法在代码注释中高亮指定行:
// [!code highlight] 或 // [!code hl] — 高亮单行// [!code highlight:3] — 高亮当前行及接下来 2 行使用 // [!code ++] 和 // [!code --] 标记新增和删除的行:
使用 // [!code focus] 聚焦特定行,其他行变暗:
标准 Markdown 列表语法,统一的间距和缩进样式:
标准 Markdown 表格语法,自动添加圆角边框和悬停高亮:
标准 Markdown 分隔线语法 --- 即可。