shikijs / shiki

A beautiful yet powerful syntax highlighter
http://shiki.style/
MIT License
10.41k stars 378 forks source link

Poor performance of "getting started" `@shikijs/markdown-it` code #853

Open hyperupcall opened 2 days ago

hyperupcall commented 2 days ago

Validations

Describe the bug

Thanks for making this tool! I'm using Shiki through the shikijs/markdown-it package. I used the code as per the instructions (full code in repro):

import Shiki from '@shikijs/markdown-it'
import MarkdownIt from 'markdown-it'

const md = MarkdownIt()

md.use(await Shiki({
  themes: {
    light: 'vitesse-light',
    dark: 'vitesse-dark',
  }
}))

It surprised me that this takes several seconds to execute (~4.6 seconds with dev tools open (image/trace below)).

image shiki2.cpuprofile

This was a bit surprising to me since I assumed the "getting started code" wouldn't perform that poorly. Fixing the issue was straightforward (I specified the langs: [...] field on initialization), but I brought this up because I don't think I'm the first or last one to run into this surprise. And this "getting started" code may cause people to have the perception that ShikiJS is slower than it actually is. I myself, assumed that this code executed pretty quickly and that languages were loaded lazily (while evaluating Markdown text). Not sure the right approach for addressing this concern, but if it's a simple docs fix, I'd be happy to make a PR

Reproduction

https://github.com/fox-archives/repro-shiki-perf

Contributes

antfu commented 2 days ago

Sure, PR welcome! The reason we didn't mention that before because for markdown, if you don't control the content, it might need any languages. Also because that markdown-it doesn't support async highlighting, we can't load languages on-demand. I am good with improve the docs by mention the trade-offs here.