Broken Typst highlight

[l0uisgrange]

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

Hi!

I just noticed that in Typst language, if you put something like this:

#import "@preview/zap:0.2.0"

#zap.canvas({
    import zap: *

    isource("i1", (0,0), (5,0))
})

Inside Shiki, the inside of the {} is totally broken (the text is full black). It looks like this with the GitHub light theme:

But if I remove the zap before the canvas, everything works perfectly:

Here's the code I used :

const highlighter = await createHighlighter({
    themes: ['github-light-default', 'github-dark-default'],
    langs: ['typst']
});
code = highlighter.codeToHtml(content.toString(), {
    theme: isDarkMode ? 'github-dark-default' : 'github-light-default',
    lang: language
});

You can go to the minimal reproduction below and npm run dev, then check http://localhost:5173/zap/docs to see the problem. The Code component is under src/components/Code.svelte.

Reproduction

https://github.com/l0uisgrange/shiki-minimal-example

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[l0uisgrange]

I have tested it on Safari, Chrome and Edge, they all have this issue, so it does not seem to be linked to #1005.

I also noticed an issue with dashes. The expected look is this:

#import "@preview/zap:0.2.0"

#canvas({
    import zap: *
    set-style(stroke: 1pt)
    // Your amazing circuit
})

but the look given by Shiki is this:

[Myriad-Dreamin]

I suggest update to this one. The current typst grammar used by shiki was made by the typst owner when they made their thesis (2022).