JJalonTsui

欢迎使用 Markdown 文章系统

预计阅读1 分钟
markdownmdxnextjs

欢迎使用 Markdown 文章系统

这是一篇示例文章，用于验证 next-mdx-remote + shiki + Tailwind CSS 的文章渲染能力。你可以通过左侧目录快速跳转到任意章节。

基础排版

段落、加粗、斜体、行内代码、删除线 都应正常渲染。链接示例如：Tailwind CSS。

这是一段引用块。引用块在自定义组件中会被赋予独立的背景色与左侧边框。

列表情境

无序列表：

  • 使用 next-mdx-remote 在服务端编译 MDX
  • 通过 components prop 自定义每个标签的样式
  • 使用 rehype-slug 为标题生成锚点

有序列表：

  1. 解析 frontmatter 与正文
  2. 提取标题层级生成 TOC
  3. 渲染详情页与目录组件

表格与 GFM

GitHub Flavored Markdown 表格示例：

方案数据源样式定制TOC
Velite本地文件中需插件
next-mdx-remote任意高成熟
@next/mdx本地文件中需插件

任务列表：

  • 安装依赖
  • 创建示例文章
  • 实现 TOC 组件

代码高亮

下面是一段 TypeScript 代码块，会被 shiki 自动高亮：

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

console.log(greet('MDX'));

行内代码如 const x = 1 也会带上样式。

嵌套标题

三级标题示例

这是三级标题下的内容，用于验证 TOC 能正确渲染多级标题。

四级标题示例

更深的层级通常用于细节说明。目录中主要展示二级与三级标题。

结语

以上涵盖了 Markdown 文章系统最常见的渲染元素。你可以继续扩展更多自定义组件，例如提示框、标签页、代码分组等。