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.

Sign up for GitHub

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

Jump to bottom

Shorthand functions do not automatically load sub-grammars #887

Open
4 of 5 tasks
ezzatron opened this issue Jan 10, 2025 · 0 comments
Open
4 of 5 tasks

Shorthand functions do not automatically load sub-grammars #887

ezzatron opened this issue Jan 10, 2025 · 0 comments

Comments

@ezzatron
Copy link

ezzatron commented Jan 10, 2025 •
edited
Loading

Validations

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/[email protected]";

    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

Screenshot 2025-01-10 at 16 09 00

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ezzatron