快速开始

快速开始

从包含 Next.js、MDX、Tailwind CSS 的模板开始：

或者在 StackBlitz 或 CodeSandbox 上在线试用。

查看更完整的启动模板，请访问示例页面。

如需手动安装，请参见下文。

详细介绍

为什么选择 Code Hike？

Code Hike 为 Markdown 提供结构化支持，将其转化为创建交互式用户界面的强大基础。通过与 React 的深度集成，它让您能够展示为现代 Web 量身定制的内容。

适用人群

主要用例包括代码演示、教程和文档。但它的用途远不止于此。

大型文档项目

如果构建文档设计系统的人员与编写内容的人员不同，Code Hike 就是为您而生的。Code Hike 帮助您构建现代化的布局、组件和代码块，同时保持 Markdown 的编写体验。想要 Stripe 级别的类型安全文档 UI？我们为您提供支持。

小型文档和博客

如果您是独立开发者或小团队成员，Code Hike 让您的内容更加灵活，您可以发挥创造力，利用 React 的全部功能以最引人入胜的方式呈现内容。

内容创作者

视频、幻灯片、截图。Code Hike 让内容与展示形式的分离变得简单。使用 React 为您的内容构建完美的样式，并在所有平台上重复使用。您知道可以将 Code Hike 与 Remotion 结合使用吗？

任何内容网站

着陆页、营销网站、作品集。甚至不需要与编程相关的内容。Code Hike 帮助您将内容与设计分离。

查看示例获取灵感。

工作原理

Code Hike 使用 MDX 插件将 Markdown 内容转换为对象。然后您可以在 React 组件中访问这些对象，并利用 React 提供的所有灵活性来呈现内容。

对于代码块，Code Hike 提供了一个 highlight 函数，它不仅应用语法高亮，还从代码注释中提取注释。结果可以传递给 Code Hike 提供的 Pre 组件。您可以编写自己的 React 服务器组件来处理这些注释，再次为您提供 React 的全部功能来显示代码。

文档提供了各种示例，包括布局和代码注释，您可以复制、粘贴并根据需要进行调整。

技术栈

需要 React 和 MDX。

强烈推荐使用 Zod 进行模式验证。

推荐但不要求支持 React 服务器组件的框架。

不支持 Astro。

文档中的示例使用 Tailwind CSS，但这不是必需的。

我推荐文档网站使用 Next.js + Fuma Docs，因为它支持 React 服务器组件。Code Hike 不需要 RSC，但拥有仅在构建时运行的组件为您提供了额外的功能和灵活性。

有关使用各种框架的示例，请参见示例。

与其他工具的对比

MDX：Code Hike 基于 MDX 构建。

Markdoc：Markdoc 是 Markdown 的另一个扩展。主要区别在于：

  • 细粒度 Markdown：与 Code Hike 类似，Markdoc 允许您为 Markdown 添加一些结构，在内容渲染方式上提供更多灵活性。Markdoc 的方法更底层，因此未来可以探索与 Code Hike 的集成。
  • 代码块：您可以通过在 Markdoc 的语法高亮示例中使用 Code Hike 的 highlight 函数而不是 prismjs 来结合 Code Hike 和 Markdoc。

Shiki：一个包含转换器来自定义代码块的语法高亮器。Code Hike 使用自己的高亮器。高亮器之间的主要区别是 Shiki 转换器用于转换代码块的 AST（抽象语法树），而 Code Hike 注释是 React 组件。

Docusaurus、Nextra、Fuma Docs：这些是帮助您构建文档网站的_框架_，处理 Markdown/MDX 文件并提供一些 UI 组件。您可以在它们之上使用 Code Hike。在如何处理代码块方面存在重叠，但您可以使用 ignoreCode 配置逐步让 Code Hike 接管。

手动安装

  1. 确保您已经设置了一个处理 MDX 文件的框架（对于 Next.js，您可以遵循此指南）。

  2. 安装 Code Hike：

npm install codehike
  1. 设置 MDX 插件：
next.config.mjs
import { remarkCodeHike, recmaCodeHike } from "codehike/mdx"



/** @type {import('codehike/mdx').CodeHikeConfig} */

const chConfig = {

  // 可选（参见代码文档）：

  components: { code: "Code" },

  // 如果您无法使用 RSC：

  // syntaxHighlighting: {

  //   theme: "github-dark",

  // },

}



const mdxOptions = {

  remarkPlugins: [[remarkCodeHike, chConfig]],

  recmaPlugins: [[recmaCodeHike, chConfig]],

  jsx: true,

}
  1. 尝试块页面中的示例。

块