Shorthand functions do not automatically load sub-grammars #887
Description
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
When highlighting a language like MDX where the grammar incorporates other sub-grammars, the shorthand functions like codeToHtml seem to not load the sub-grammars, causing unexpected highlighting output.
Reproduction
<body style="max-width: 80ch">
<h1>Shiki shorthand MDX sub-grammar reproduction</h1>
<h2>
This code is rendered using the shorthands, which fail to load the
sub-grammars needed for MDX:
</h2>
<div id="not-working"></div>
<h2>
This code is rendered with a highlighter with all languages pre-loaded, and
renders the MDX correctly:
</h2>
<div id="working"></div>
<script type="module">
import {
bundledLanguages,
bundledThemes,
codeToHtml,
createHighlighter,
} from "https://esm.sh/shiki@1.26.1";
const code = `import MyComponent from './MyComponent';
<MyComponent id="123" />
You can also use objects with components, such as the \`thisOne\` component on
the \`myComponents\` object: <myComponents.thisOne />
<Component
open
x={1}
label={'this is a string, *not* markdown!'}
icon={<Icon />}
/>
{/* From https://mdxjs.com/docs/what-is-mdx/#mdx-syntax */}`;
document.getElementById("not-working").innerHTML = await codeToHtml(code, {
lang: "mdx",
theme: "github-light",
});
const highlighter = await createHighlighter({
themes: ["github-light"],
langs: Object.keys(bundledLanguages),
});
document.getElementById("working").innerHTML = highlighter.codeToHtml(
code,
{ lang: "mdx", theme: "github-light" },
);
</script>
</body>
t.getElementById("working").innerHTML = highlighter.codeToHtml(
code,
{ lang: "mdx", theme: "github-light" },
);
</script>
</body>Sample output
This is most likely the cause of #769, so I think for that issue you can probably rule out changes in the MDX grammar being the issue.
Contributes
- I am willing to submit a PR to fix this issue
- I am willing to submit a PR with failing tests