vuejs / theme

VitePress theme for vuejs.org.
MIT License
238 stars 83 forks source link

Use shiki's latest API for code block with line highlights #41

Closed octref closed 2 years ago

octref commented 2 years ago

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?

yyx990803 commented 2 years ago

Sorry for letting this sit - the theme is stable now and a PR is most welcome!

Jinjiang commented 2 years ago

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 https://github.com/vuejs/vitepress/pull/1152

octref commented 2 years ago

@Jinjiang Thanks!