feat: add support collapsed-lines for code highlighters (#246)

vuepress · Sep 16, 2024 · c0f70e4 · c0f70e4
1 parent 07bdc57
commit c0f70e4
Show file tree

Hide file tree

Showing 28 changed files with 1,892 additions and 86 deletions.
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -114,6 +114,7 @@ export default defineUserConfig({
           notationHighlight: true,
           notationWordHighlight: true,
           whitespace: true,
+          collapsedLines: false,
         })
       : [],
     cachePlugin(),

diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts
@@ -81,6 +81,7 @@ export default defaultTheme({
           notationHighlight: true,
           notationWordHighlight: true,
           whitespace: true,
+          collapsedLines: false,
         },
   },
 })
diff --git a/docs/plugins/markdown/prismjs.md b/docs/plugins/markdown/prismjs.md
@@ -194,6 +194,207 @@ export default defineUserConfig({
 })
 ```
 
+### collapsedLines
+
+- Type: `boolean | number | 'disabled'`
+
+- Default: `'disabled'`
+
+- Details: Default behavior of code block collapsing.
+
+  - `number`: collapse the code block starting from line `number` by default, for example, `12` means collapsing the code block starting from line 12.
+  - `true`: Equivalent to `15`, collapsing the code block starting from line 15 by default.
+  - `false`: Add support for code block collapsing, but disable it globally
+  - `'disabled'`: Completely disable code block collapsing, `:collapsed-lines` will not take effect.
+
+  To override global settings, you can add the `:collapsed-lines` / `:no-collapsed-lines` marker to the code block. You can also add `=` after `:collapsed-lines` to customize the starting line number being collapsed, for example, `:collapsed-lines=12` means collapsing the code block starting from line 12.
+
+**Input:**
+
+````md
+<!-- Collapsed by default starting from line 15 -->
+
+```css :collapsed-lines
+html {
+  margin: 0;
+  background: black;
+  height: 100%;
+}
+/* ... more code */
+```
+
+<!-- Disabled collapsed -->
+
+```css :no-collapsed-lines
+html {
+  margin: 0;
+  background: black;
+  height: 100%;
+}
+/* ... more code */
+```
+
+<!-- Collapsed starting from line 10 -->
+
+```css :collapsed-lines=10
+html {
+  margin: 0;
+  background: black;
+  height: 100%;
+}
+/* ... more code */
+```
+````
+
+**Output:**
+
+<!-- Collapsed by default starting from line 15 -->
+
+```css :collapsed-lines
+html {
+  margin: 0;
+  background: black;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  width: 100%;
+  height: inherit;
+}
+
+/* the three main rows going down the page */
+
+body > div {
+  height: 25%;
+}
+
+.thumb {
+  float: left;
+  width: 25%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.main {
+  display: none;
+}
+
+.blowup {
+  display: block;
+  position: absolute;
+  object-fit: contain;
+  object-position: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2000;
+}
+
+.darken {
+  opacity: 0.4;
+}
+```
+
+<!-- Disabled collapsed -->
+
+```css :no-collapsed-lines
+html {
+  margin: 0;
+  background: black;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  width: 100%;
+  height: inherit;
+}
+
+/* the three main rows going down the page */
+
+body > div {
+  height: 25%;
+}
+
+.thumb {
+  float: left;
+  width: 25%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.main {
+  display: none;
+}
+
+.blowup {
+  display: block;
+  position: absolute;
+  object-fit: contain;
+  object-position: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2000;
+}
+
+.darken {
+  opacity: 0.4;
+}
+```
+
+<!-- Collapsed starting from line 10 -->
+
+```css :collapsed-lines=10
+html {
+  margin: 0;
+  background: black;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  width: 100%;
+  height: inherit;
+}
+
+/* the three main rows going down the page */
+
+body > div {
+  height: 25%;
+}
+
+.thumb {
+  float: left;
+  width: 25%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.main {
+  display: none;
+}
+
+.blowup {
+  display: block;
+  position: absolute;
+  object-fit: contain;
+  object-position: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2000;
+}
+
+.darken {
+  opacity: 0.4;
+}
+```
+
 ::: tip
 
 In the new version, some functionalities similar to [shiki](https://shiki.style/packages/transformers) have been implemented, allowing you to style code blocks using the same syntax.
@@ -501,7 +702,7 @@ In the new version, some functionalities similar to [shiki](https://shiki.style/
 
   Adds extra wrapper outside `<pre>` tag or not.
 
-  The wrapper is required by the `lineNumbers`. That means, if you disable `preWrapper`, the line line numbers will also be disabled.
+  The wrapper is required by the `lineNumbers` and `collapsedLines`. That means, if you disable `preWrapper`, the line line numbers and collapsed lines will also be disabled.
 
   ::: tip