Skip to main content

markdown-it

Full example on GitHub

Use @lumis-sh/markdown-it-lumis when your renderer is built on markdown-it.

Install​

npm install markdown-it @lumis-sh/markdown-it-lumis @lumis-sh/themes

Example​

import MarkdownIt from 'markdown-it'

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 md = new MarkdownIt()

const lumis = await markdownItLumis({

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

  languages: [javascript, rust, plaintext],

})



lumis(md)



const html = md.render(markdown)

Use this for tools like VitePress or for custom markdown-it renderers.

Exports​

default​

const lumis = await markdownItLumis(options)

lumis(md)

Creates a Lumis highlighter and returns an installer function for a markdown-it instance.

fromHighlighter​

import {createHighlighter} from '@lumis-sh/lumis'

import {fromHighlighter} from '@lumis-sh/markdown-it-lumis'

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

import {bundledLanguages} from '@lumis-sh/lumis/bundles/web'

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



const highlighter = await createHighlighter({languages: [bundledLanguages]})

await highlighter.loadLanguage(bundledLanguages.javascript)



const lumis = fromHighlighter(highlighter, options)

lumis(md)

Use this when you want to reuse an existing highlighter.

Options​

  • formatter - required callback that receives the fence language and returns a Lumis formatter
  • languages - languages to register or preload before calling sync md.render(); accepts Language objects, bundles, and string refs when a bundle is also present

Behavior​

  • overrides fenced code rendering
  • loads any language refs passed in languages during async setup
  • renders synchronously after setup, so preload the languages you expect to use
  • falls back to the default fence renderer if highlighting fails and no fallback succeeds