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

[Feature Request] Provide plain-shiki component for dynamic content syntax highlighting #259

Open
GalacticHypernova opened this issue Oct 3, 2024 · 0 comments

Comments

@GalacticHypernova
Copy link

GalacticHypernova commented Oct 3, 2024

Related: https://github.com/nuxt/ui-pro/issues/511

To start, I understand this may be a bit outside the scope of the module, but nonetheless I believe it would be beneficial for dynamic web apps with mixed types of content.

Having a component strictly for syntax highlight, like nuxt-shiki has, will be beneficial for dynamic web sites that include user uploads as well as static content.

If we take a look at websites like github, user uploads of code snippets could benefit from the shiki highlighter without all the related markdown features. It would simplify the integration and will prevent any edge cases around highlighting code with full markdown (like having ``` in the code, which would break highlighting altogether)

In addition, having said strictly highlighting component will have significant performance benefits. By handling pure code out of the box, developers won't need to introduce 2 libraries for syntax highlighting, which will reduce bundle size. Furthermore, the pure code component could use a minimalistic implementation of the already-present syntax highlighter with only the necessary core parts which will reduce memory footprint, as the MDC component already handles all the advanced features that pure code won't need.

In addition, the current approach has limitations and bugs out in production using client side navigation to a non-content page with syntax highlighting content. That is because it sends a request to the mdc highlight endpoint with the full code in the query, which triggers a 431 Request Header Fields Too Large error, ultimately breaking highlighting.

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

No branches or pull requests

1 participant