Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(plugin-shiki): add built-in twoslash support #348

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

Mister-Hope
Copy link
Member

No description provided.

Copy link

netlify bot commented Jan 24, 2025

Deploy Preview for vuepress-ecosystem ready!

Name Link
🔨 Latest commit bb50152
🔍 Latest deploy log https://app.netlify.com/sites/vuepress-ecosystem/deploys/6793b03ce6a3a50008c2312f
😎 Deploy Preview https://deploy-preview-348--vuepress-ecosystem.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Jan 24, 2025

Deploy Preview for vuepress-ecosystem ready!

Name Link
🔨 Latest commit dafb52a
🔍 Latest deploy log https://app.netlify.com/sites/vuepress-ecosystem/deploys/67a5f3f082bdb40008086d66
😎 Deploy Preview https://deploy-preview-348--vuepress-ecosystem.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Mister-Hope
Copy link
Member Author

@pengzhanbo It seems that you already implement a good approach in your theme, please consider migrating the feature upstream.

@coveralls
Copy link

coveralls commented Jan 24, 2025

Pull Request Test Coverage Report for Build 13199274422

Details

  • 3 of 7 (42.86%) changed or added relevant lines in 1 file are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage decreased (-0.07%) to 59.612%

Changes Missing Coverage Covered Lines Changed/Added Lines %
plugins/markdown/plugin-shiki/src/node/transformers/getTransformers.ts 3 7 42.86%
Totals Coverage Status
Change from base Build 12964973105: -0.07%
Covered Lines: 1349
Relevant Lines: 2046

💛 - Coveralls

@pengzhanbo
Copy link
Member

I see that the current PR uses renderRich as the rendering solution for twoslash.

In the early stages of my theme, I also used renderRich, but the experience was not user-friendly. It was limited by the code block's overflow: auto setting; if the popup inside the code block was too large and exceeded the width or height of the code block, the popup would be partially obscured, and the code block would display a scrollbar.

I suggest using RenderFloatingVue as the rendering mode, which would provide a much better experience. Of course, this would require introducing more third-party dependencies like floating-vue, mdast-util-from-markdown, mdast-util-gfm, and mdast-util-to-hast.

If twoslash is to be integrated into plugin-shiki, having users manually install these dependencies related to twoslash would raise the barrier to usage. Should we consider making them default installed dependencies? Do you have any solutions regarding this?

@Mister-Hope
Copy link
Member Author

I would prefer optional deps plan, and if the deps are too many, we can consider providing an extra package which has them as deps, so that users can install a single package (e.g.: @vuepress/shiki-twoslash) to achieve

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants