nuxt-shiki

Nuxt + Shiki syntax highlighter!

Features

• Configurable themes and languages
• Full lazy loading with auto hydration of highlighted code
• Treeshakable and optimized integration with shiki/core

[!IMPORTANT] This module is under development!

Quick setup

Add Nuxt module:

npx nuxi module add @zinkawaii/nuxt-shiki

That's it! You can now use nuxt-shiki in your Nuxt app ✨

Options

Options can be configured using shiki key in nuxt.config:

export default defineNuxtConfig({
  modules: ['@zinkawaii/nuxt-shiki'],
  shiki: {
    /* shiki options */
  },
})

Available options:

• bundledThemes and bundledLangs can be configured to set bundled themes and languages.
• defaultTheme and defaultLang can be configured to set default theme and language.
• dynamic can be configured to set whether languages are dynamically loaded. (in this way, all languages will be bundled)
• langAlias can be configured to set language aliases.
• highlightOptions can be configured to set highlight defaults.

<Shiki> component

You can use <Shiki> component to highlight code in your Vue app:

<template>
  <Shiki lang="js" code="console.log('hello');" />
</template>

The component will render a pre tag with highlighted code inside.

You can use the as prop to render a different tag:

<template>
  <Shiki lang="js" code="console.log('hello');" as="span" />
</template>

If unwrap prop is set to true or as is pre, it will automatically unwrap the code props to top level.

Additionally you can use highlightOptions prop to set shiki highlight options.

Utils

getShikiHighlighter()

Lazy-load shiki instance.

You can use this utility both in server/ and vue app code.

Example:

<script setup>
const highlighter = await getShikiHighlighter()
const html = highlighter.highlight(`const hello = 'shiki'`, { lang: 'js' })
</script>

Example:

// server/api/highlight.ts
export default defineEventHandler(async (event) => {
  const highlighter = await getShikiHighlighter()
  return highlighter.highlight(`const hello = 'shiki'`, { lang: 'js' })
})

loadShikiLanguages()

Dynamically loading languages when options.dynamic is true.

Example:

<script setup>
await loadShikiLanguages("tsx", "vue")
</script>

resolveShikiOptions(highlightOptions)

Resolve highlightOptions with defaults.

Example:

const shiki = await getShikiHighlighter()
const options = await resolveShikiOptions({ lang: 'js' })
const hast = shiki.codeToHast(`const hello = 'shiki'`, options)

useShikiHighlighted(code, options)

Return a lazy highlighted code ref (only usable in Vue)

Example:

<script setup>
const code = ref(`const hello = 'shiki'`)
const highlighted = await useShikiHighlighted(code)
</script>

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release