Use shiki's latest API for code block with line highlights
octref opened this issue · 3 comments
Was poking around the new site to see Shiki's usage in the wild. I think the current line highlighting solution can be simplified.
Shiki 0.10.0 adds an API to highlight specific lines. For example, this:
highlighter
.codeToHtml(code, {
lang,
theme,
lineOptions: [
{ line: 2, classes: ['highlighted']}
]
})
generates something like:
<span class="line"></span>
<span class="line highlighted"></span>
<span class="line"></span>
The current line highlighter uses a workaround by rendering two layers, one with the highlighted code and the other one with all <br>
. By using the API it cuts some HTML for code blocks with highlighted lines:
I have a PR - should I wait until this repo is more stabalized to send it?
Sorry for letting this sit - the theme is stable now and a PR is most welcome!
It seems should be done on the vitepress repo instead: https://github.com/vuejs/vitepress
more precisely, replacing this plugin:
https://github.com/vuejs/vitepress/blob/70b3060be963ed7a0d2041446d67ac970d6f35e3/src/node/markdown/plugins/highlightLines.ts
Done vuejs/vitepress#1152