[v4?] New code highlighter

[yhatt]

Related: marp-team/marp#103, #194

Let's start to think new architecture for code highlight toward Marp Core v4.

CSS variables based coloring

highlight.js based highlighting has high flexibility that came from stylabillity based on CSS class.

On the other hand, it is hard than expected to overload exist color scheme by the context. If the theme author wanted to use different highlight colors in section.invert, required reverting all styles about highlight.js and adding styles for changed colors.

When using theme inheritance by @import, need to know all of styles using for highlight in the parent theme and revert them surely.

I think it's painful for the custom theme author, so providing much better coloring system in code highlight would be best. https://github.com/orgs/marp-team/discussions/103#discussioncomment-702465

If Marp adopted CSS variables for code highlighting, changing color scheme by class context would be drastically simpler. It also means to deny detailed styling for highlighted keywords through CSS properties, but it's a corner case in the syntax highlight.

highlight.js -> Shiki

#194 (comment) has suggested a modern highlighter Shiki, made on TextMate json and Oniguruma RegExp engine.

Concerns

• Deasync for loading highlight engine (markdown-it/Marpit does not support Promise in rendering for now)
  • Node.js: synckit (similar to deasync but requires no native bindings or node-gyp)
  • Browser: nothing
    • Inject an inline Web Worker when initializing Marp for deasync
    • Or consider to return thenable proxy object in Marp.render()
  • (We are already planning the next-gen engine of Marpit to support async/await while rendering)
• Oniguruma WASM
  • Browser requires to fetch WASM from CDN that is supported CORS (jsDelivr, unpkg, etc)

Extended syntax for code fence

CommonMark defines the info string for fenced code block, like ```javascript. It leaves to Markdown processors about how to use this string, so may add more useful features to Marp.

• Line-based highlight: ```lang 1,3-4
  • Highlight several lines in code block and add line number marp-vscode#146
  • Add line based code highlighting #168
• Line numbers ```lang line-numbers (```lang line-numbers=3 to begin from the middle of line numbers)
  • Add line numbers to code block marp#164

We need work to them carefully because complexity of Marp Core theme CSS will increase at the same time.