Recipes
Browsers / CDN
Highlight code directly in Browsers with ESM CDN imports.
A browser loads only the parser packages you import, so import the one you need from jsDelivr next to Lumis. jsDelivr serves the parser file next to the module, and Lumis fetches nothing else.
<script type="module">
import {highlight} from 'https://cdn.jsdelivr.net/npm/@lumis-sh/lumis/+esm'
import {
htmlInline,
} from 'https://cdn.jsdelivr.net/npm/@lumis-sh/lumis/dist/formatters.js'
import frappe from 'https://cdn.jsdelivr.net/npm/@lumis-sh/themes/dist/themes/catppuccin_frappe.js'
import javascript from 'https://cdn.jsdelivr.net/npm/@lumis-sh/wasm-javascript/+esm'
const output = document.getElementById('output')
output.innerHTML = await highlight(
'const x = 1',
htmlInline({language: javascript, theme: frappe})
)
</script>
<div id="output"></div>See Where parsers come from, and Custom resolvers to fetch parsers at run time instead.