如何在CodeHike中实现代码折叠和展开功能：完整指南

2026-02-05 05:31:29作者：谭伦延

CodeHike是一个强大的代码展示工具，专门用于创建引人入胜的代码浏览体验。代码折叠功能是CodeHike最实用的特性之一，它能让用户专注于代码的关键部分，提高阅读效率。

🎯 什么是CodeHike代码折叠功能？

CodeHike的代码折叠功能允许你隐藏代码块中的特定部分，只展示最重要的代码片段。这对于展示大型函数、复杂组件或需要逐步解释的代码特别有用。通过折叠非关键代码，读者可以更好地理解代码结构和逻辑流程。

🔧 实现代码折叠的完整步骤

1. 导入必要的组件

首先，你需要从CodeHike导入核心组件：

import { RawCode, Pre, highlight, AnnotationHandler } from "codehike/code"

2. 创建折叠处理程序

在[apps/web/demos/fold/page.tsx](https://gitcode.com/gh_mirrors/co/codehike/blob/6f9b4c19d76bdc6808664918dc5bdb238907dd60/apps/web/demos/fold/page.tsx?utm_source=gitcode_repo_files)中，我们定义了一个折叠处理程序：

export const fold: AnnotationHandler = {
  name: "fold",
  Inline: InlineFold,
}

3. 配置代码块组件

创建一个异步的Code组件来处理代码高亮和折叠：

async function Code({ codeblock }: { codeblock: RawCode }) {
  const info = await highlight(codeblock, "github-dark")
  return <Pre className="m-0 bg-zinc-950/80" code={info} handlers={[fold]} />
}

4. 在MDX中使用折叠注解

在Markdown文件中，使用!fold注解来标记需要折叠的代码部分：

// !fold[/className="(.*?)"/gm]
function Foo() {
  return (
    <div className="bg-red-200 opacity-50">
      <span className="block">hey</span>
    </div>
  )
}