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
Configure nuxt.config.ts
import {htmlInline} from '@lumis-sh/lumis/formatters'
import {bundledLanguages} from '@lumis-sh/lumis/bundles/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: [bundledLanguages],
},
},
},
},
},
},
})
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? }.