https://github.com/T-miracle/vitepress-plugin-codeblocks-fold

Add collapse to vitepress codeblocks. 给 vitepress 代码块添加折叠功能
https://github.com/T-miracle/vitepress-plugin-codeblocks-fold

Last synced: 3 months ago
JSON representation

Add collapse to vitepress codeblocks. 给 vitepress 代码块添加折叠功能

• Host: GitHub
• URL: https://github.com/T-miracle/vitepress-plugin-codeblocks-fold
• Owner: T-miracle
• Created: 2023-04-08T14:47:46.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-21T15:54:29.000Z (9 months ago)
• Last Synced: 2024-09-24T01:29:05.300Z (4 months ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/vitepress-plugin-codeblocks-fold
• Size: 1.16 MB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vitepress-v1 - Collapsable Code Blocks - Collapse long code blocks in Markdown (:electric_plug: Plugins / Community Plugins)

README

        
# vitepress-plugin-codeblocks-fold

[![npm](https://img.shields.io/npm/v/vitepress-plugin-codeblocks-fold?color=green)](https://www.npmjs.com/package/vitepress-plugin-codeblocks-fold)

English | [简体中文](README_zh.md)

![](./demo.webp)

> Add collapse to vitepress codeblocks

  update log

  


    


      
v1.2.28

      
Fix line number display out of bounds

    

    


      
v1.2.27

      
Scrollbar style remove

    

    


      
v1.2.25

      
Fix the horizontal scrollbar not showing

    

  


## Install

```shell

// npm 

npm i vitepress-plugin-codeblocks-fold

// yarn

yarn add vitepress-plugin-codeblocks-fold

```

## Use

```js

// .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.css'; // 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`(unit`px`). can be ignored.

## Extended use

You can set frontmatter to a single .md file

```md

---

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`

- `true` means that all code blocks on the current page are folded

- `false` means that all code blocks on the current page are not folded

## more vitepress plugins

You may be interested in these plugins：

[Click me to view more vitepress plugins](https://github.com/T-miracle/vitepress-plugins)