Skip to main content

VitePress

Full example on GitHub

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

Configure .vitepress/config.ts​

import {defineConfig} from 'vitepress'

import markdownItLumis from '@lumis-sh/markdown-it-lumis'

import {htmlInline} from '@lumis-sh/lumis/formatters'

import javascript from '@lumis-sh/lumis/langs/javascript'

import rust from '@lumis-sh/lumis/langs/rust'

import plaintext from '@lumis-sh/lumis/langs/plaintext'

import githubLight from '@lumis-sh/themes/github_light'



const lumis = await markdownItLumis({

  formatter: (language) => htmlInline({language, theme: githubLight}),

  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 javascript from '@lumis-sh/lumis/langs/javascript'

import rust from '@lumis-sh/lumis/langs/rust'

import plaintext from '@lumis-sh/lumis/langs/plaintext'

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)

    },

  },

})

Preload the languages you expect to render.