Repository navigation
Shiki syntax highlight support #2530
Description
Activity
Hi @noraj , As per the requirement that customizing the code block class, I think it is feasible for now.
You could register a customer renderer for code.window.$docsify = { markdown: { renderer: { code({ text, lang }) { return /* customized code block */ `<pre data-lang="${lang}" class="shiki language-${lang}"><code class="lang-${lang} language-${lang}" tabindex="0">${text}</code></pre>`; }, }, }, }
Not quite sure whether Shiki support static css add-on styling for code hightlight, glad to see ur feedback on it!
Reacted by Alexandre ZANNIHello @noraj
Yes, I think so. I'm new to Docsify, and I've created a new project to try it out, but it doesn't seem to highlight anything.
Shiki support would be a nice upgrade, but the integration should probably account for its async highlighter setup and theme loading. A good first version could expose Shiki as an optional plugin that preloads configured languages/themes, then falls back gracefully when a language is missing. That keeps the core lightweight while giving users a path to modern highlighting.
Here's a plugin https://github.com/simochee/docsify-shiki
I also created a plugin: https://github.com/sy-records/docsify-shiki
Feature request
Problem or desire
Prism syntax highlight is quite bad (highlight.js is bad too).
Proposal
Support Shiki.
Shiki has better syntax highlight because it uses TextMate grammar instead of shady regexp. It uses the same engine as in VS Code.
Implementation
I guess the only thing to do on doscify side, is to add a config option that allows to generate a different highlighter class prefix. That way all JS syntax highlighter could nearly be supported.
shikilanguage-prefixhljshttps://shiki.style/guide/install#cdn-usage