pi0/nuxt-shiki

Ability to provide a fallback if the language isn't bundled

Closed this issue · 2 comments

Hi, I have shiki configured via nuxt like so in my nuxt.config.ts:

shiki: {
    defaultTheme: 'github-dark',
    bundledLangs: ['typescript', ...],
  },

If the language isnt in the bundledLangs I want to fallback to plain. I've tried doing this but I still get an error that the lang isn't in the bundle:

import { type BundledLanguage, bundledLanguages } from 'shiki'

const props = defineProps<{ code: string, extension: string }>()

const lang = computed(() => {
  const ext = props.extension
  const language = Object.keys(bundledLanguages).find((key) => {
    if (ext === key)
      return true

    return false
  })

  return (language ?? 'plain') as BundledLanguage
})

Then I'm using the Shiki component like so:

<Shiki :lang="lang" :code="code" class="overflow-x-auto whitespace-pre-wrap" />

So is there a way to get the bundledLangs that is configured in nuxt.config.ts to check?

bundledLanguages includes all languages. You should use Highlighter.getLoadedLanguages() to check if a language exists in the bundle.

Thank you, that worked :)