Shiki syntax highlight support

[noraj]

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.

• shiki: css class shiki
• prism: css class language- prefix
• highlightjs: css class hljs

https://shiki.style/guide/install#cdn-usage

[Koooooo-7]

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!

[AhmedAlaa4611]

Hello @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.

[RedCMD]

it uses TextMate grammar instead of shady regexp

@noraj TextMate grammars are regexp based?