Skip to main content

CSS Theme Files

The htmlLinked formatter emits CSS class names instead of inline styles. You provide a theme stylesheet.

JavaScript package​

Import a stylesheet from @lumis-sh/themes/css/<theme>.css.

import '@lumis-sh/themes/css/dracula.css'

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

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

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



const html = await highlight('const x = 1', htmlLinked({language: javascript}))

CDN​

Load the compiled CSS file directly:

<link rel="stylesheet" href="https://unpkg.com/@lumis-sh/themes/dist/css/dracula.css">

Available distribution folders:

  • CSS: https://unpkg.com/browse/@lumis-sh/themes/dist/css/
  • JSON: https://unpkg.com/browse/@lumis-sh/themes/dist/json/

Elixir / Phoenix​

Lumis ships CSS files under priv/static/css/.

endpoint.ex
plug Plug.Static,

  at: "/themes",

  from: {:lumis, "priv/static/css/"},

  only: ["dracula.css"]
layout
<link phx-track-static rel="stylesheet" href={~p"/themes/dracula.css"} />

Repository-generated CSS​

Inside this repo, CSS theme files are generated into multiple targets:

  • css/*.css
  • packages/elixir/lumis/priv/static/css/
  • packages/javascript/themes/dist/css/

That is why the same theme can be consumed from Rust assets, Elixir static files, and the JavaScript themes package.

When to use CSS theme files​

  • many code blocks on one page
  • existing app stylesheet pipeline
  • cacheable stylesheets
  • smaller HTML output than inline styles

If you want the block to be self-contained instead, use htmlInline.