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

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>
  )
}

💡 核心功能详解

正则表达式匹配

CodeHike使用正则表达式来识别需要折叠的代码模式。在上面的例子中，/className="(.*?)"/gm会匹配所有的className属性。

交互式用户体验

折叠后的代码区域会显示一个可点击的展开按钮，用户可以随时展开查看完整代码。这种设计既保持了页面的整洁，又提供了完整的可访问性。

🚀 实际应用场景

• 教程文档：逐步展示代码实现过程
• API文档：隐藏重复的配置代码
• 代码示例：突出显示核心逻辑
• 教学材料：分步骤解释复杂概念

📁 关键文件位置

• 折叠处理程序：apps/web/components/annotations/fold.tsx
• 客户端组件：apps/web/components/annotations/fold.client.tsx
• 演示页面：apps/web/demos/fold/page.tsx
• 演示内容：apps/web/demos/fold/content.md

🎉 总结

CodeHike的代码折叠功能为技术文档和代码展示提供了革命性的改进。通过简单的注解语法，你可以创建既美观又实用的代码展示页面，极大地提升了读者的阅读体验和学习效率。

无论你是创建技术博客、API文档还是教学材料，掌握CodeHike的代码折叠功能都将让你的内容更加专业和易于理解。