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

pengzhanbo · 2024-09-13T18:17:57Z

Before submitting the PR, please make sure you do the following

Read the Contributing Guidelines.
Provide a description in this PR that addresses what the PR is solving. If this PR is going to solve an existing issue, please reference the issue (e.g. close #123).

What is the purpose of this pull request?

Bug fix
New feature
Other

Description

Screenshots

Before

After

coveralls · 2024-09-13T18:20:14Z

Pull Request Test Coverage Report for Build 10871006435

Details

1 of 24 (4.17%) changed or added relevant lines in 2 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage increased (+0.3%) to 57.817%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
plugins/markdown/plugin-prismjs/src/node/prepareConfigFile.ts	0	8	0.0%
plugins/markdown/plugin-prismjs/src/node/prismjsPlugin.ts	1	16	6.25%

Totals
Change from base Build 10862365305:	0.3%
Covered Lines:	1122
Relevant Lines:	1750

💛 - Coveralls

Mister-Hope · 2024-09-14T12:11:43Z

plugins/markdown/plugin-prismjs/src/node/prepareConfigFile.ts

@@ -78,5 +80,22 @@ export const prepareConfigFile = (
    )
  }

-  return app.writeTemp('prismjs/config.js', imports.join('\n'))
+  imports.push(
+    `import "${getRealPath('@vuepress/highlighter-helper/styles/collapsed-lines.css', url)}"`,


I think we should only import these when the feature is enabled?

Mister-Hope · 2024-09-14T12:12:02Z

plugins/markdown/plugin-prismjs/src/node/prismjsPlugin.ts

@@ -29,6 +33,7 @@ export const prismjsPlugin = ({
    md.use<PreWrapperOptions>(preWrapperPlugin, { preWrapper })
    if (preWrapper) {
      md.use(lineNumbersPlugin, { lineNumbers, removeLastLine: true })
+      md.use(collapsedLinesPlugin, { collapsedLines, removeLastLine: true })


Why this plugin should be used anyway?

Mister-Hope · 2024-09-14T12:12:13Z

plugins/markdown/plugin-prismjs/tests/prismjs-preWrapper.spec.ts

-      removeLastLine: true,
-    })
+    md.use(lineNumbersPlugin, { lineNumbers, removeLastLine: true })
+    md.use(collapsedLinesPlugin, { collapsedLines, removeLastLine: true })


Mister-Hope · 2024-09-14T12:12:29Z

plugins/markdown/plugin-shiki/src/node/prepareConfigFile.ts

@@ -64,5 +66,22 @@ export const prepareConfigFile = (
    )
  }

-  return app.writeTemp('shiki/config.js', imports.join('\n'))
+  imports.push(


Mister-Hope · 2024-09-14T12:12:53Z

plugins/markdown/plugin-shiki/tests/shiki-preWrapper.spec.ts

  if (preWrapper) {
-    md.use<MarkdownItLineNumbersOptions>(lineNumbersPlugin, { lineNumbers })
+    md.use(lineNumbersPlugin, { lineNumbers })
+    md.use(collapsedLinesPlugin, { collapsedLines })


Mister-Hope · 2024-09-14T12:15:11Z

tools/highlighter-helper/src/client/composables/collapsedLines.ts

+  selector = 'div[class*="language-"].has-collapsed-lines > .collapsed-lines',
+}: { selector?: string } = {}): void => {
+  if (__VUEPRESS_SSR__) return
+  window.addEventListener('click', (e) => {


I would prefer useEventListener, I discourage to see __VUEPRESS_SSR__ as a judgement to visit window outside onMounted

Mister-Hope · 2024-09-14T12:17:20Z

tools/highlighter-helper/src/client/styles/collapsed-lines.scss

+@property --vp-collapsed-lines-bg {
+  inherits: false;
+  initial-value: #fff;
+  syntax: '<color>';
+}


Is this needed?

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@property From the table, firefox only supports it from 128. I am not sure if there will be errors under lower version of firfox.

Don't worry, in lower versions it will just be recognized as a regular CSS variable, and after the downgrade, the corresponding background gradient transition animation simply won't take effect.

Mister-Hope · 2024-09-14T12:17:52Z

tools/highlighter-helper/src/client/styles/line-numbers.scss

@@ -23,7 +23,7 @@ div[class*='language-'] {
      border-right: 1px solid var(--code-c-highlight-bg, var(--code-c-text));
      border-radius: var(--code-border-radius) 0 0 var(--code-border-radius);

-      transition: border var(--t-color);
+      transition: border var(--vp-t-color);


nice catch, could this be in a sperate PR?

I see that it was fixed in another commit.

Mister-Hope

Some documentation improvements are suggested

Mister-Hope · 2024-09-15T07:42:24Z

docs/plugins/markdown/prismjs.md

+
+  - `number`: collapse the code block starting from line `number`, for example, `12` means collapsing the code block starting from line 12.
+  - `true`: Equivalent to `15`, collapsing the code block starting from line 15.
+  - `false`: Disable code block collapsed, but `:collapsed-lines` can still be added to collapse individual code blocks.


I think the description can be changed to:

Add support for code block collapsing, but disable it globally

Also I would prefer the word code block collapsing instead of code block collapsed.

Mister-Hope · 2024-09-15T07:43:33Z

docs/plugins/markdown/prismjs.md

+  - `false`: Disable code block collapsed, but `:collapsed-lines` can still be added to collapse individual code blocks.
+  - `'disabled'`: Completely disable code block collapsed, `:collapsed-lines` will not take effect.
+
+  You can add the `:collapsed-lines` / `:no-collapsed-lines` marker to the code block to override the settings in the configuration item. You can also add `=` after `:collapsed-lines` to customize the starting collapsed line number, for example, `:collapsed-lines=12` means collapsing the code block starting from line 12.


to customize the starting line number being collapsed

Mister-Hope · 2024-09-15T07:44:09Z

docs/plugins/markdown/prismjs.md

+  - `false`: Disable code block collapsed, but `:collapsed-lines` can still be added to collapse individual code blocks.
+  - `'disabled'`: Completely disable code block collapsed, `:collapsed-lines` will not take effect.
+
+  You can add the `:collapsed-lines` / `:no-collapsed-lines` marker to the code block to override the settings in the configuration item. You can also add `=` after `:collapsed-lines` to customize the starting collapsed line number, for example, `:collapsed-lines=12` means collapsing the code block starting from line 12.


To override global settings, you can add the xxx marker to code blocks.

Mister-Hope · 2024-09-15T07:49:48Z

docs/plugins/markdown/prismjs.md

+
+- Default: `'disabled'`
+
+- Details: Whether to enable code block collapsing.


I think this could be changed to Default behavior of code block collapsing

And the description of the first two settings could be added with the words by default

feat: add support collapsed-lines for code highlighters

c0b6a6b

pengzhanbo added 3 commits September 14, 2024 13:18

chore: tweak

f95f05e

test: add unit test

162d537

docs: add collapsed-lines docs

1455ff2

pengzhanbo marked this pull request as ready for review September 14, 2024 10:40

Merge branch 'main' into collapsed-lines

a6f04ab

Mister-Hope requested changes Sep 14, 2024

View reviewed changes

pengzhanbo added 3 commits September 14, 2024 22:16

Merge branch 'main' into collapsed-lines

eea4bf4

chore: tweak

e3cf4a0

chore: tweak

1ff4ed1

pengzhanbo requested a review from Mister-Hope September 15, 2024 06:11

Mister-Hope reviewed Sep 15, 2024

View reviewed changes

chore: improve docs

2112f2b

pengzhanbo requested a review from Mister-Hope September 15, 2024 12:41

Mister-Hope approved these changes Sep 16, 2024

View reviewed changes

Mister-Hope merged commit c0f70e4 into main Sep 16, 2024
29 checks passed

Mister-Hope deleted the collapsed-lines branch September 16, 2024 02:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

pengzhanbo commented Sep 13, 2024

coveralls commented Sep 13, 2024 •

edited

Loading

Mister-Hope Sep 14, 2024

Mister-Hope Sep 14, 2024

Mister-Hope Sep 14, 2024

Mister-Hope Sep 14, 2024

Mister-Hope Sep 14, 2024

Mister-Hope Sep 14, 2024

Mister-Hope Sep 14, 2024

pengzhanbo Sep 14, 2024

Mister-Hope Sep 14, 2024

pengzhanbo Sep 14, 2024 •

edited

Loading

Mister-Hope left a comment

Mister-Hope Sep 15, 2024

Mister-Hope Sep 15, 2024

Mister-Hope Sep 15, 2024

Mister-Hope Sep 15, 2024


		- Default: `'disabled'`

		- Details: Whether to enable code block collapsing.

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

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

Conversation

pengzhanbo commented Sep 13, 2024

Before submitting the PR, please make sure you do the following

What is the purpose of this pull request?

Description

Screenshots

coveralls commented Sep 13, 2024 • edited Loading

Pull Request Test Coverage Report for Build 10871006435

Details

💛 - Coveralls

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pengzhanbo Sep 14, 2024 • edited Loading

Choose a reason for hiding this comment

Mister-Hope left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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

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

coveralls commented Sep 13, 2024 •

edited

Loading

pengzhanbo Sep 14, 2024 •

edited

Loading