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.

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

Languages not included when using a custom theme #583

Closed
3 of 5 tasks
wesbos opened this issue Feb 9, 2024 · 3 comments
Closed
3 of 5 tasks

Languages not included when using a custom theme #583

wesbos opened this issue Feb 9, 2024 · 3 comments

Comments

@wesbos
Copy link
Contributor

wesbos commented Feb 9, 2024

Validations

Describe the bug

I'm trying to use Shiki with a custom theme, but it seems by loading a custom theme, all the default languages are then lost.

I get Error: Language javascript not found, you may need to load it first

The example from the docs does not run:

import { getHighlighter } from 'shiki';

const myTheme = {
  name: 'my-theme',
  settings: [
    {
      scope: ['comment'],
      settings: {
        foreground: '#888',
      },
    },
    // ...
  ],
};

const highlighter = await getHighlighter({
  themes: [myTheme],
});

const code = `console.log('hello')`;
const html = highlighter.codeToHtml(code, {
  lang: 'javascript',
  theme: 'my-theme',
});
Screenshot 2024-02-08 at 11 06 29 PM

Reproduction

above

Contributes

  • I am willing to submit a PR to fix this issue
  • I am willing to submit a PR with failing tests
@antfu
Copy link
Member

antfu commented Feb 9, 2024

Since Shiki v1.0, langs have to be explicitly specified in order to be used:
https://shiki.style/guide/install#highlighter-usage

If you want to use all langs available:

import { bundledLanguages, bundledThemes, getHighlighter } from 'shiki'

const highlighter = await getHighlighter({
  themes: Object.keys(bundledThemes),
  langs: Object.keys(bundledLanguages),
})

Or if your code only runs on Node, you can use the automated shorthand:
https://shiki.style/guide/install#shorthands

@antfu antfu closed this as completed in 8515a20 Feb 9, 2024
@antfu
Copy link
Member

antfu commented Feb 9, 2024

Made the type stricter, hope this could help avoid the confusion.

@wesbos
Copy link
Contributor Author

wesbos commented Feb 9, 2024

Gotcha! So I started with the shorthand, and then followed the docs for a custom theme. because I switched away from the shorthand to load my own theme, I have to explicitly pass the langs needed.

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants