vitepress-plugin-code-collapse 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 pengzhanbo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# vitepress-plugin-code-collapse
+
+provide code block collapsed lines feature
+
+在 VitePress 中提供代码块折叠行功能。
+
+## Usage
+
+### With Vitepress-tuck
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-tuck vitepress-plugin-code-collapse
+# pnpm
+pnpm add -D vitepress-tuck vitepress-plugin-code-collapse
+# yarn
+yarn add -D vitepress-tuck vitepress-plugin-code-collapse
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import codeCollapse from 'vitepress-plugin-code-collapse'
+import { defineConfig } from 'vitepress-tuck'
+
+export default defineConfig({
+  plugins: [codeCollapse()],
+})
+```
+
+```ts
+// .vitepress/theme/index.ts
+import type { Theme } from 'vitepress'
+import enhanceApp from 'virtual:enhance-app'
+import DefaultTheme from 'vitepress/theme'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp(ctx) {
+    enhanceApp(ctx)
+  },
+} satisfies Theme
+```
+
+### With Vitepress
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-plugin-code-collapse
+# pnpm
+pnpm add -D vitepress-plugin-code-collapse
+# yarn
+yarn add -D vitepress-plugin-code-collapse
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import { defineConfig } from 'vitepress'
+import { collapsedLinesMarkdownPlugin } from 'vitepress-plugin-code-collapse'
+
+export default defineConfig({
+  markdown: {
+    config: (md) => {
+      md.use(collapsedLinesMarkdownPlugin)
+    },
+  }
+})
+```
+
+```ts
+// .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
+```
+
+## Syntax
+
+use `:collapsed-lines` to collapse lines in code block.
+
+````md
+```ts :collapsed-lines
+const a = 1
+```
+````

package/dist/client/browser/index.d.ts

@@ -0,0 +1,31 @@
+//#region src/client/setupCollapsedLines.d.ts
+/**
+ * Setup collapsed lines functionality for code blocks
+ *
+ * 为代码块设置折叠行功能
+ *
+ * @example
+ *   import { setupCollapsedLines } from '@vuepress/highlighter-helper/client'
+ *
+ *   // Use default selector
+ *   setupCollapsedLines()
+ *
+ *   // Use custom selector
+ *   setupCollapsedLines({
+ *     selector: '.my-collapsed-lines',
+ *   })
+ *
+ * @param options - Setup options / 设置选项
+ * @param options.selector - CSS selector for collapsed lines elements / 折叠行元素的
+ *   CSS 选择器
+ */
+declare function setupCollapsedLines({
+  selector
+}?: {
+  selector?: string;
+}): void;
+//#endregion
+//#region src/client/index.d.ts
+declare function enhanceAppWithCollapsedLines(): void;
+//#endregion
+export { enhanceAppWithCollapsedLines, setupCollapsedLines };

package/dist/client/browser/index.js

@@ -0,0 +1,42 @@
+import "../style.css";
+import { useEventListener } from "@vueuse/core";
+//#region src/client/setupCollapsedLines.ts
+/**
+* Setup collapsed lines functionality for code blocks
+*
+* 为代码块设置折叠行功能
+*
+* @example
+*   import { setupCollapsedLines } from '@vuepress/highlighter-helper/client'
+*
+*   // Use default selector
+*   setupCollapsedLines()
+*
+*   // Use custom selector
+*   setupCollapsedLines({
+*     selector: '.my-collapsed-lines',
+*   })
+*
+* @param options - Setup options / 设置选项
+* @param options.selector - CSS selector for collapsed lines elements / 折叠行元素的
+*   CSS 选择器
+*/
+function setupCollapsedLines({ selector = "div[class*=\"language-\"].has-collapsed-lines > .collapsed-lines" } = {}) {
+	useEventListener("click", (event) => {
+		const target = event.target;
+		if (target.matches(selector)) {
+			const parent = target.parentElement;
+			if (parent?.classList.toggle("collapsed")) parent.scrollIntoView({
+				block: "center",
+				behavior: "instant"
+			});
+		}
+	}, { passive: true });
+}
+//#endregion
+//#region src/client/index.ts
+function enhanceAppWithCollapsedLines() {
+	setupCollapsedLines();
+}
+//#endregion
+export { enhanceAppWithCollapsedLines, setupCollapsedLines };

package/dist/client/ssr/index.d.ts

@@ -0,0 +1,31 @@
+//#region src/client/setupCollapsedLines.d.ts
+/**
+ * Setup collapsed lines functionality for code blocks
+ *
+ * 为代码块设置折叠行功能
+ *
+ * @example
+ *   import { setupCollapsedLines } from '@vuepress/highlighter-helper/client'
+ *
+ *   // Use default selector
+ *   setupCollapsedLines()
+ *
+ *   // Use custom selector
+ *   setupCollapsedLines({
+ *     selector: '.my-collapsed-lines',
+ *   })
+ *
+ * @param options - Setup options / 设置选项
+ * @param options.selector - CSS selector for collapsed lines elements / 折叠行元素的
+ *   CSS 选择器
+ */
+declare function setupCollapsedLines({
+  selector
+}?: {
+  selector?: string;
+}): void;
+//#endregion
+//#region src/client/index.d.ts
+declare function enhanceAppWithCollapsedLines(): void;
+//#endregion
+export { enhanceAppWithCollapsedLines, setupCollapsedLines };

package/dist/client/ssr/index.js

@@ -0,0 +1,41 @@
+import { useEventListener } from "@vueuse/core";
+//#region src/client/setupCollapsedLines.ts
+/**
+* Setup collapsed lines functionality for code blocks
+*
+* 为代码块设置折叠行功能
+*
+* @example
+*   import { setupCollapsedLines } from '@vuepress/highlighter-helper/client'
+*
+*   // Use default selector
+*   setupCollapsedLines()
+*
+*   // Use custom selector
+*   setupCollapsedLines({
+*     selector: '.my-collapsed-lines',
+*   })
+*
+* @param options - Setup options / 设置选项
+* @param options.selector - CSS selector for collapsed lines elements / 折叠行元素的
+*   CSS 选择器
+*/
+function setupCollapsedLines({ selector = "div[class*=\"language-\"].has-collapsed-lines > .collapsed-lines" } = {}) {
+	useEventListener("click", (event) => {
+		const target = event.target;
+		if (target.matches(selector)) {
+			const parent = target.parentElement;
+			if (parent?.classList.toggle("collapsed")) parent.scrollIntoView({
+				block: "center",
+				behavior: "instant"
+			});
+		}
+	}, { passive: true });
+}
+//#endregion
+//#region src/client/index.ts
+function enhanceAppWithCollapsedLines() {
+	setupCollapsedLines();
+}
+//#endregion
+export { enhanceAppWithCollapsedLines, setupCollapsedLines };

package/dist/client/style.css

@@ -0,0 +1,75 @@
+/* stylelint-disable no-descending-specificity */
+:root {
+  --vp-collapsed-lines-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='m18 12l-6 6l-6-6m12-6l-6 6l-6-6'/%3E%3C/svg%3E");
+  --vp-collapsed-lines-rotate: 0deg;
+}
+
+@property --vp-collapsed-lines-bg {
+  inherits: false;
+  initial-value: #fff;
+  syntax: "<color>";
+}
+
+@keyframes code-collapsed-lines {
+  0% {
+    opacity: 0.3;
+    transform: translateY(-2px) rotate(var(--vp-collapsed-lines-rotate));
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(2px) rotate(var(--vp-collapsed-lines-rotate));
+  }
+}
+
+div[class*="language-"].has-collapsed-lines .collapsed-lines {
+  --vp-collapsed-lines-bg: var(--vp-code-block-bg);
+
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  cursor: pointer;
+  background: linear-gradient(to bottom, transparent 0%, var(--vp-collapsed-lines-bg) 55%, var(--vp-collapsed-lines-bg) 100%);
+  transition: --vp-collapsed-lines-bg 0.2s ease-in-out;
+}
+
+div[class*="language-"].has-collapsed-lines .collapsed-lines:hover {
+  --vp-collapsed-lines-bg: var(--vp-c-default-soft);
+}
+
+div[class*="language-"].has-collapsed-lines .collapsed-lines::before {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  pointer-events: none;
+  content: "";
+  background-color: var(--vp-code-block-color);
+  mask-image: var(--vp-collapsed-lines-icon);
+  mask-repeat: no-repeat;
+  mask-position: 50%;
+  mask-size: 20px;
+  animation: 1.2s ease-in-out infinite alternate-reverse code-collapsed-lines;
+}
+
+div[class*="language-"].has-collapsed-lines[data-highlighter="shiki"] .collapsed-lines {
+  --vp-collapsed-lines-bg: var(--vp-code-block-bg, var(--shiki-light-bg));
+}
+
+[data-theme="dark"] div[class*="language-"].has-collapsed-lines[data-highlighter="shiki"] .collapsed-lines {
+  --vp-collapsed-lines-bg: var(--vp-code-block-bg, var(--shiki-dark-bg));
+}
+
+div[class*="language-"].has-collapsed-lines.collapsed {
+  height: calc(var(--vp-collapsed-lines) * var(--vp-code-line-height) * var(--vp-code-font-size) + 48px);
+  overflow-y: hidden;
+}
+
+div[class*="language-"].has-collapsed-lines:not(.collapsed) .collapsed-lines {
+  --vp-collapsed-lines-rotate: 180deg;
+}

package/dist/node/index.d.ts

@@ -0,0 +1,62 @@
+import { PluginWithOptions } from "markdown-it";
+
+//#region src/node/types.d.ts
+/**
+ * Whether to collapse code blocks when they exceed a certain number of lines
+ *
+ * - If `number`, collapse starts from line `number`.
+ * - If `true`, collapse starts from line 15 by default.
+ * - If `false`, do not enable code block collapsing globally, but you can
+ *   enable it for individual code blocks using `:collapsed-lines`
+ * - If `'disable'`, Completely disable code block collapsing
+ *
+ * 当代码块超过一定行数时是否折叠
+ *
+ * - 如果是 `number`，从第 `number` 行开始折叠
+ * - 如果是 `true`，默认从第 15 行开始折叠
+ * - 如果是 `false`，不全局启用代码块折叠，但你可以为单个代码块使用 `:collapsed-lines` 启用
+ * - 如果是 `'disable'`，完全禁用代码块折叠
+ *
+ * @default false
+ */
+type CollapsedLinesOptions = boolean | number | 'disable';
+//#endregion
+//#region src/node/codeCollapsePlugin.d.ts
+/**
+ * Add collapsed lines functionality to code blocks in markdown-it
+ *
+ * 为 markdown-it 中的代码块添加折叠行功能
+ *
+ * @param md - MarkdownIt instance / MarkdownIt 实例
+ * @param options - Plugin options / 插件选项
+ *
+ * @example
+ * ```ts
+ * import { collapsedLinesMarkdownPlugin } from 'vitepress-code-collapse'
+ * import { defineConfig } from 'vitepress'
+ * export default defineConfig({
+ *   markdown: {
+ *     config(md) {
+ *       md.use(collapsedLinesMarkdownPlugin)
+ *     }
+ *   }
+ * })
+ * ```
+ */
+declare const collapsedLinesMarkdownPlugin: PluginWithOptions<CollapsedLinesOptions>;
+//#endregion
+//#region src/node/index.d.ts
+/**
+ * @example
+ * ```ts
+ * import collapsedLines from 'vitepress-code-collapse'
+ * import { defineConfig } from 'vitepress-tuck'
+ * export default defineConfig({
+ *   plugins: [collapsedLines()]
+ * })
+ * ```
+ * ```
+ */
+declare const _default: (option?: number | boolean | "disable" | undefined) => import("vitepress-tuck").VitepressPlugin;
+//#endregion
+export { collapsedLinesMarkdownPlugin, _default as default };

package/dist/node/index.js

@@ -0,0 +1,116 @@
+import { definePlugin } from "vitepress-tuck";
+//#region src/node/resolveCollapsedLine.ts
+/**
+* Regular expression to match `:collapsed-lines` directive in code block info
+*
+* 匹配代码块信息中 `:collapsed-lines` 指令的正则表达式
+*/
+const COLLAPSED_LINES_REGEXP = /:collapsed-lines\b/u;
+/**
+* Regular expression to match `:collapsed-lines=num` directive in code block
+* info
+*
+* 匹配代码块信息中 `:collapsed-lines=num` 指令的正则表达式
+*/
+const COLLAPSED_LINES_START_REGEXP = /:collapsed-lines=(\d+)\b/u;
+/**
+* Regular expression to match `:no-collapsed-lines` directive in code block
+* info
+*
+* 匹配代码块信息中 `:no-collapsed-lines` 指令的正则表达式
+*/
+const NO_COLLAPSED_LINES_REGEXP = /:no-collapsed-lines\b/u;
+/**
+* Resolve the `:collapsed-lines` `:collapsed-lines=num` / `:no-collapsed-lines`
+* mark from token info
+*
+* 从 token 信息中解析 `:collapsed-lines` `:collapsed-lines=num` /
+* `:no-collapsed-lines` 标记
+*
+* @example
+*   resolveCollapsedLines('js :collapsed-lines') // true
+*   resolveCollapsedLines('js :collapsed-lines=20') // 20
+*   resolveCollapsedLines('js :no-collapsed-lines') // false
+*   resolveCollapsedLines('js') // null
+*
+* @param info - Code block info string / 代码块信息字符串
+* @returns Collapsed lines configuration / 折叠行配置
+*
+*   - `number` - Start line number for collapsing / 折叠起始行号
+*   - `true` - Enable collapsed lines / 启用折叠行
+*   - `false` - Disable collapsed lines / 禁用折叠行
+*   - `null` - No configuration found / 未找到配置
+*/
+function resolveCollapsedLines(info) {
+	const lines = COLLAPSED_LINES_START_REGEXP.exec(info)?.[1];
+	if (lines) return Number(lines);
+	if (COLLAPSED_LINES_REGEXP.test(info)) return true;
+	if (NO_COLLAPSED_LINES_REGEXP.test(info)) return false;
+	return null;
+}
+//#endregion
+//#region src/node/codeCollapsePlugin.ts
+/**
+* Add collapsed lines functionality to code blocks in markdown-it
+*
+* 为 markdown-it 中的代码块添加折叠行功能
+*
+* @param md - MarkdownIt instance / MarkdownIt 实例
+* @param options - Plugin options / 插件选项
+*
+* @example
+* ```ts
+* import { collapsedLinesMarkdownPlugin } from 'vitepress-code-collapse'
+* import { defineConfig } from 'vitepress'
+* export default defineConfig({
+*   markdown: {
+*     config(md) {
+*       md.use(collapsedLinesMarkdownPlugin)
+*     }
+*   }
+* })
+* ```
+*/
+const collapsedLinesMarkdownPlugin = (md, options = false) => {
+	if (options === "disable") return;
+	const rawFence = md.renderer.rules.fence;
+	md.renderer.rules.fence = (...args) => {
+		const [tokens, index] = args;
+		const token = tokens[index];
+		const info = token.info ? md.utils.unescapeAll(token.info).trim() : "";
+		const code = rawFence(...args);
+		const collapsedLinesInfo = resolveCollapsedLines(info) ?? options;
+		if (collapsedLinesInfo === false) return code;
+		const lines = code.slice(code.indexOf("<code>"), code.indexOf("</code>")).split("\n").length;
+		const startLines = typeof collapsedLinesInfo === "number" ? collapsedLinesInfo : 15;
+		if (lines < startLines) return code;
+		const collapsedLinesCode = `<div class="collapsed-lines"></div>`;
+		const styles = `--vp-collapsed-lines:${startLines};`;
+		return code.replace(/<\/div>$/u, `${collapsedLinesCode}</div>`).replace(/"(language-[^"]*)"/u, "\"$1 has-collapsed-lines collapsed\"").replace(/^<div[^>]*>/u, (match) => {
+			if (!match.includes("style=")) return `${match.slice(0, -1)} style="${styles}">`;
+			return match.replace(/(style=")/u, `$1${styles}`);
+		});
+	};
+};
+//#endregion
+//#region src/node/index.ts
+/**
+* @example
+* ```ts
+* import collapsedLines from 'vitepress-code-collapse'
+* import { defineConfig } from 'vitepress-tuck'
+* export default defineConfig({
+*   plugins: [collapsedLines()]
+* })
+* ```
+* ```
+*/
+var node_default = definePlugin((options) => ({
+	name: "vitepress-plugin-code-collapse",
+	client: { enhance: "enhanceAppWithCollapsedLines" },
+	markdown: { config: (md) => {
+		md.use(collapsedLinesMarkdownPlugin, options);
+	} }
+}));
+//#endregion
+export { collapsedLinesMarkdownPlugin, node_default as default };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "vitepress-plugin-code-collapse",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "provide code block collapsed lines feature",
+  "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo/)",
+  "license": "MIT",
+  "keywords": [
+    "vitepress",
+    "vitepress-plugin",
+    "code-collapse",
+    "collapsed-lines"
+  ],
+  "exports": {
+    ".": "./dist/node/index.js",
+    "./client": {
+      "browser": "./dist/client/browser/index.js",
+      "default": "./dist/client/ssr/index.js"
+    },
+    "./style.css": "./dist/client/style.css"
+  },
+  "module": "./dist/node/index.js",
+  "types": "./dist/node/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vitepress": "^1.6.4 || ^2.0.0-alpha.17",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.3.0",
+    "vitepress-plugin-toolkit": "0.1.0",
+    "vitepress-tuck": "0.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf --glob ./dist",
+    "dev": "pnpm '/(tsdown|copy):watch/'",
+    "build": "pnpm tsdown && pnpm copy",
+    "copy": "cpx \"src/**/*.css\" dist",
+    "copy:watch": "pnpm copy -w",
+    "tsdown": "tsdown --config-loader unrun",
+    "tsdown:watch": "pnpm tsdown -w"
+  }
+}