@lumis-sh/markdown-it-lumis

markdown-it plugin for Lumis syntax highlighting.

Install

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

Quick start

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 typescript from '@lumis-sh/lumis/langs/typescript'
import json from '@lumis-sh/lumis/langs/json'
import dracula from '@lumis-sh/themes/dracula'

const plugin = await markdownItLumis({
  formatter: (language) => htmlInline({ language, theme: dracula }),
  languages: [javascript, typescript, json],
})

const md = new MarkdownIt()
md.use(plugin)

const html = md.render('```javascript\nconst x = 1\n```')

formatter receives the language detected from the fenced block and returns a Lumis Formatter. Any built-in or custom formatter works.

languages lists which languages to download and prepare. Since md.render() is synchronous, this has to happen before rendering. Fenced blocks that use a language not in this list won't be highlighted.

Multiple themes

import { htmlMultiThemes } from '@lumis-sh/lumis/formatters'
import githubLight from '@lumis-sh/themes/github_light'
import githubDark from '@lumis-sh/themes/github_dark'

const plugin = await markdownItLumis({
  formatter: (language) => htmlMultiThemes({
    language,
    themes: { light: githubLight, dark: githubDark },
  }),
  languages: [javascript],
})

Using bundles

You can pass a bundle to make a group of languages available, then load specific ones by name:

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

const plugin = await markdownItLumis({
  formatter: (language) => htmlInline({ language, theme: dracula }),
  languages: [bundledLanguages, 'javascript', 'json'],
})

Bring your own highlighter

If you already have a Highlighter instance, use fromHighlighter() to skip setup:

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

const hl = await createHighlighter({ languages: [javascript] })
const plugin = fromHighlighter(hl, {
  formatter: (language) => htmlInline({ language, theme: dracula }),
})

const md = new MarkdownIt()
md.use(plugin)

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | formatter | (language: string \| undefined) => Formatter | (required) | Creates a Lumis formatter for each code block | | languages | Array | [] | Languages to download and prepare. Accepts Language objects, bundles, or string names (when a bundle is also passed). |