Code Collapse

代码块折叠插件，当代码块超过指定行数时自动折叠，提升页面阅读体验。

安装

pnpm

pnpm add vitepress-plugin-code-collapse

npm

npm install vitepress-plugin-code-collapse

bun

bun add vitepress-plugin-code-collapse

deno

deno add vitepress-plugin-code-collapse

yarn

yarn add vitepress-plugin-code-collapse

使用

vitepress-tuck 模式 推荐

.vitepress/config.ts

import { defineConfig } from 'vitepress-tuck'
import collapsedLines from 'vitepress-plugin-code-collapse'

export default defineConfig({
  plugins: [
    collapsedLines(),
  ],
})

查看 vitepress-tuck 了解更多

传统模式

.vitepress/config.ts

import { defineConfig } from 'vitepress'
import { collapsedLinesMarkdownPlugin } from 'vitepress-plugin-code-collapse'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(collapsedLinesMarkdownPlugin)
    },
  },
})

.vitepress/theme/index.ts

import type { Theme } from 'vitepress'
import { enhanceAppWithCollapsedLines } from 'vitepress-plugin-code-collapse/client'
import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    enhanceAppWithCollapsedLines(ctx)
  },
} satisfies Theme

语法

全局折叠

当在配置中设置 options 为数字时，或者为 true（默认为 15 行）时，所有超过该行数的代码块都会自动折叠。

单个代码块折叠

可以在代码块的 info 字符串中使用 :collapsed-lines={N} 语法单独控制：

```ts :collapsed-lines
// 使用默认值折叠（15行）
```

```ts :collapsed-lines=10
// 从第10行开始折叠
```

配置

/**
   * 折叠行数配置
   * - `true`: 超过 15 行时折叠
   * - `number`: 超过指定行数时折叠
   * - `false`: 不全局启用，允许单代码块控制 （默认值）
   * - `'disable'`: 完全禁用插
   * @default 'false'
   */
type options = boolean | number | 'disable'

示例

```ts :collapsed-lines=10
const a1 = 1
const a2 = 2
const a3 = 1
const a4 = 1
const a5 = 1
const a6 = 2
const a7 = 1
const a8 = 1
const a9 = 1
const a10 = 2
const a11 = 1
const a12 = 1
```

const a1 = 1
const a2 = 2
const a3 = 1
const a4 = 1
const a5 = 1
const a6 = 2
const a7 = 1
const a8 = 1
const a9 = 1
const a10 = 2
const a11 = 1
const a12 = 1