Lumis custom theme

Mix.install([
  {:mdex, "~> 0.13"},
  {:lumis, "~> 0.10"},
  {:lumis_wasm_elixir, "~> 0.26"},
  {:lumis_wasm_ruby, "~> 0.26"},
  {:lumis_wasm_rust, "~> 0.26"},
  {:kino, "~> 0.16"}
],
  config: [mdex_native: [syntax_highlighter: :lumis]]
)

Intro

Lumis themes are Elixir structs, so you can edit one before passing it to MDEx. This example changes the style used for function calls.

Customization

Below we'll customize the github_light theme but you can work with any %Lumis.Theme{} or build one from scratch. Building a theme takes the :lumis package, which is why this notebook installs it; highlighting with MDEx doesn't.

theme = Lumis.Theme.get("github_light")

function_call_style =
  %Lumis.Theme.Style{
    fg: "#d1242f",
    bg: "#e4b7be",
    bold: true
  }

new_theme = put_in(
  theme,
  [Access.key!(:highlights), Access.key!("function.call")],
  function_call_style
)

%Lumis.Theme{
  name: "github_light",
  appearance: :light,
  revision: "c106c9472154d6b2c74b74565616b877ae8ed31d",
  highlights: %{
    "function.macro" => %Lumis.Theme.Style{
      fg: "#6639ba",
      bg: nil,
      bold: false,
      italic: false,
      text_decoration: %Lumis.Theme.TextDecoration{underline: nil, strikethrough: false}
    },
    "variable.builtin" => %Lumis.Theme.Style{
      fg: "#0550ae",
      bg: nil,
      bold: false,
      italic: false,
      text_decoration: %Lumis.Theme.TextDecoration{underline: nil, strikethrough: false}
    },
    "markup.list.checked" => %Lumis.Theme.Style{
      fg: "#116329",
      bg: nil,
      bold: false,
      italic: false,
      text_decoration: %Lumis.Theme.TextDecoration{underline: nil, strikethrough: false}
    },
    "character" => %Lumis.Theme.Style{
      fg: "#0a3069",
      bg: nil,
      bold: false,
      italic: false,
      text_decoration: %Lumis.Theme.TextDecoration{underline: nil, strikethrough: false}
    },
    "string.special.symbol" => %Lumis.Theme.Style{
      fg: "#0550ae",
      bg: nil,
      bold: false,
      italic: false,
      text_decoration: %Lumis.Theme.TextDecoration{underline: nil, strikethrough: false}
    },
    "markup.strong" => %Lumis.Theme.Style{
      fg: "#1f2328",
      bg: nil,
      bold: true,
      italic: false,
      text_decoration: %Lumis.Theme.TextDecoration{underline: nil, strikethrough: false}
    },
    "markup.list.unchecked" => %Lumis.Theme.Style{
      fg: "#57606a",
      bg: nil,
      bold: false,
      italic: false,
      text_decoration: %Lumis.Theme.TextDecoration{underline: nil, strikethrough: false}
    },
    "variable.parameter.builtin" => %Lumis.Theme.Style{
      fg: "#0550ae",
      bg: nil,
      bold: false,
      italic: false,
      text_decoration: %Lumis.Theme.TextDecoration{underline: nil, strikethrough: false}
    },
    "character.special" => %Lumis.Theme.Style{
      fg: "#1f2328",
      bg: nil,
      bold: false,
      italic: false,
      text_decoration: %Lumis.Theme.TextDecoration{underline: nil, strikethrough: false}
    },
    "boolean" => %Lumis.Theme.Style{
      fg: "#0550ae",
      bg: nil,
      bold: false,
      italic: false,
      text_decoration: %Lumis.Theme.TextDecoration{underline: nil, strikethrough: false}
    },
    "string.escape" => %Lumis.Theme.Style{
      fg: "#0a3069",
      bg: nil,
      bold: true,
      italic: false,
      text_decoration: %Lumis.Theme.TextDecoration{underline: nil, strikethrough: false}
    },
    "keyword.exception" => %Lumis.Theme.Style{
      fg: "#0550ae",
      bg: nil,
      bold: false,
      italic: false,
      text_decoration: %Lumis.Theme.TextDecoration{underline: nil, strikethrough: false}
    },
    ...
  }
}

options = [
  syntax_highlight: [engine: :lumis, opts: [formatter: {:html_inline, theme: new_theme}]]
]

"""
# Elixir
```elixir
# elixir example

def fib(n), do: fib(n, 1, 1)

def fib(0, _a, _b), do: []

def fib(n, a, b) when n > 0 do
  [a | fib(n - 1, b, a + b)]
end
```

# Ruby
```ruby
# ruby example

def fibonacci(n)
  return n if (0..1).include?(n)
  (fibonacci(n - 1) + fibonacci(n - 2))
end
```

# Rust
```rust
// rust example

fn fibonacci(n: u32) -> u32 {
  match n {
    0 => 1,
    1 => 1,
    _ => fibonacci(n - 1) + fibonacci(n - 2),
  }
}
```
"""
|> MDEx.to_html!(options)
|> Kino.HTML.new()