Vitepress-plugin-codeblocks-fold NPM

vitepress-plugin-codeblocks-fold

npm.io

Add collapse to vitepress codeblocks

Install

// npm 
npm i vitepress-plugin-codeblocks-fold
// yarn
yarn add vitepress-plugin-codeblocks-fold

Use

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme';
import { useData, useRoute } from 'vitepress';
import codeblocksFold from 'vitepress-plugin-codeblocks-fold'; // import method
import 'vitepress-plugin-codeblocks-fold/style/index.scss'; // import style

export default {
    ...DefaultTheme,
    enhanceApp(ctx) {
        DefaultTheme.enhanceApp(ctx);
        // ...
    },
    setup() {
        // get frontmatter and route
        const { frontmatter } = useData();
        const route = useRoute();
        // basic use
        codeblocksFold({ route, frontmatter }, true, 400);
    }
};

codeblocksFold() takes three parameters：

vitepressObj
This is an object, there must be two values in the object: route and frontmatter。
defaultAllFold
Whether the codeblocks of all pages are set to the collapsed state by default，default true; Set to 'false' to not fold by default. can be ignored.
height
The height of the codeblocks after being folded, default 400(unitpx). can be ignored.

Extended use

You can set frontmatter to a single .md file

---
cbf: [1,2,3]
---

The meaning of this array is:

When 'defaultAllFold' is set to 'true' (that is all pages are folded by default), the first、second and third code blocks of the current page are forcibly not folded
When 'defaultAllFold' is set to 'false' (that is all pages are not folded by default), the first、second and third code blocks of the current page are forcibly folded

cbf also has two parameters: true and false