Integrations
VitePress
Replace VitePress code fence highlighting with Lumis through markdown-it.
VitePress uses markdown-it under the hood. That makes Lumis integration straightforward: override the markdown renderer's highlight function and let VitePress keep the rest of its code block UI.
Install
npm install markdown-it \
@lumis-sh/markdown-it-lumis @lumis-sh/themes \
@lumis-sh/wasm-javascript @lumis-sh/wasm-rustConfigure .vitepress/config.ts
import {defineConfig} from 'vitepress'
import markdownItLumis from '@lumis-sh/markdown-it-lumis'
import {htmlInline} from '@lumis-sh/lumis/formatters'
import plaintext from '@lumis-sh/lumis/langs/plaintext'
import javascript from '@lumis-sh/wasm-javascript'
import rust from '@lumis-sh/wasm-rust'
import latte from '@lumis-sh/themes/catppuccin_latte'
const lumis = await markdownItLumis({
formatter: (language) =>
htmlInline({language, theme: latte}),
languages: [javascript, rust, plaintext],
})
export default defineConfig({
markdown: {
async config(md) {
lumis(md)
},
},
})Pick a different theme
Any @lumis-sh/themes/* theme module works.
import {defineConfig} from 'vitepress'
import markdownItLumis from '@lumis-sh/markdown-it-lumis'
import {htmlInline} from '@lumis-sh/lumis/formatters'
import plaintext from '@lumis-sh/lumis/langs/plaintext'
import javascript from '@lumis-sh/wasm-javascript'
import rust from '@lumis-sh/wasm-rust'
import nightfly from '@lumis-sh/themes/nightfly'
const lumis = await markdownItLumis({
formatter: (language) =>
htmlInline({language, theme: nightfly}),
languages: [javascript, rust, plaintext],
})
export default defineConfig({
markdown: {
async config(md) {
lumis(md)
},
},
})Load the languages you expect to render during setup.