Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
octref opened this issue Dec 28, 2021 · 3 comments
Closed

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

octref opened this issue Dec 28, 2021 · 3 comments

Comments

@octref
Copy link
Member

octref commented Dec 28, 2021

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
Copy link
Member

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

@Jinjiang
Copy link
Member

Jinjiang commented Aug 3, 2022

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

@octref
Copy link
Member Author

octref commented Aug 10, 2022

@Jinjiang Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants