vuejs/theme

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:

image

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!

@Jinjiang Thanks!