Recipes

Injected languages (HTML + CSS + JS)

Highlight HTML with nested CSS and JavaScript regions.

import html from '@lumis-sh/wasm-html'
import css from '@lumis-sh/wasm-css'
import javascript from '@lumis-sh/wasm-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.

Customize Theme Styles

Keep fenced code upright, preserve Markdown emphasis, and change a theme's background with map_styles.

Phoenix LiveView rendering

Render Lumis HTML safely in Phoenix and LiveView templates.