directly using injection grammars not working with shiki lazy loading

Sun-ZhenXing commented 2 weeks ago

Describe the bug

Cannot render jinja-html:

The language 'jinja-html' is not loaded, falling back to 'txt' for syntax highlighting.

Reproduction

markdown:

```jinja-html
<title>{% block title %}{% endblock %}</title>
<ul>
{% for user in users %}
  <li><a href="{{ user.url }}">{{ user.username }}</a></li>
{% endfor %}
</ul>


### Expected behavior

No warning.

### System Info

```Text
System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900H
    Memory: 39.10 GB / 63.69 GB
  Binaries:
    Node: 20.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 4.4.1 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.3 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.1.28 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Additional context

Use this config dose not work, but the warning disappeared:

import jinjaHtml from 'shiki/dist/langs/jinja-html.mjs'

export default {
  markdown: {
    languages: [
      ...jinjaHtml,
    ],
  },
}

Validations

[X] Check if you're on the latest VitePress version.
[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

brc-dd commented 2 weeks ago

Hmm, weird, jinja-html grammar is there but it's not part of shikis' bundledLanguages 👀

brc-dd commented 2 weeks ago

I don't think injections are even supposed to be used directly. (https://github.com/shikijs/textmate-grammars-themes/blob/main/packages/tm-grammars/README.md#injections)

Why not use just jinja?

Sun-ZhenXing commented 2 weeks ago

I've been using jinja-html without any problems, and it's only with the recent update that I encounter this problem.

Is it possible to have some way of injecting the language that avoids going directly to creating shiki obj?

brc-dd commented 2 weeks ago

The issue is it was never supposed to work. Those are internal languages. Only top-level languages are meant to be used directly. That's why if you visit https://shiki.style/ you will only see jinja. There is no jinja-html.

It's recommended that you use jinja instead. You can easily find and replace across your project. But if you want to still use jinja-html, you can explicitly load jinja:

import { defineConfig } from 'vitepress'

export default defineConfig({
  markdown: {
    async shikiSetup(highlighter) {
      await highlighter.loadLanguage('jinja')
    }
  }
})

Sun-ZhenXing commented 2 weeks ago

Thank you, it worked well.

vuejs / vitepress