Recipes

Injected languages (HTML + CSS + JS)

Highlight HTML with nested CSS and JavaScript regions.

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

const hl = await createHighlighter({languages: [html, css, javascript]})
const output = hl.highlight(source, htmlInline({language: html, theme: frappe}))

Load every participating language with the JavaScript / TypeScript API, not just the outer one.

Custom theme from JSON

Load a custom Lumis theme from JSON and use it for highlighting.

Phoenix LiveView rendering

Render Lumis HTML safely in Phoenix and LiveView templates.