Integrations
Nuxt
Use Lumis in Nuxt Content through rehype plugins.
Nuxt Content exposes markdown rehype plugins, so Lumis fits at the content pipeline layer.
Install
npm install @nuxt/content @lumis-sh/rehype-lumis \
@lumis-sh/lumis @lumis-sh/themes \
@lumis-sh/wasm-bundle-webConfigure nuxt.config.ts
import {htmlInline} from '@lumis-sh/lumis/formatters'
import web from '@lumis-sh/wasm-bundle-web'
import latte from '@lumis-sh/themes/catppuccin_latte'
export default defineNuxtConfig({
modules: ['@nuxt/content'],
content: {
build: {
markdown: {
highlight: false,
rehypePlugins: {
'@lumis-sh/rehype-lumis': {
options: {
formatter: (language) =>
htmlInline({language, theme: latte}),
languages: [web],
},
},
},
},
},
},
})Disable Nuxt Content's built-in Shiki highlighting with highlight: false when Lumis owns code blocks.
The rehype plugin options must be nested under options because Nuxt Content's plugin loader expects { instance?, options? }.