Packages
mdex
0.13.3
0.13.3
0.13.2
0.13.1
0.13.0
0.12.5
retired
0.12.4
0.12.3
0.12.2
0.12.1
0.12.0
0.11.7
0.11.6
0.11.5
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.0
0.9.4
0.9.3
0.9.2
0.9.1
0.9.0
0.8.6
0.8.5
0.8.4
0.8.3
0.8.2
0.8.1
0.8.0
0.7.5
0.7.4
0.7.3
0.7.2
0.7.1
0.7.0
0.6.2
0.6.1
0.6.0
0.5.0
0.4.3
0.4.2
0.4.1
0.4.0
0.3.3
0.3.2
0.3.1
0.3.0
0.2.0
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
Fast and extensible Markdown for Elixir
Current section
Files
Jump to
Current section
Files
examples/custom_theme.livemd
<!-- livebook:{"persist_outputs":true} -->
# Lumis custom theme
```elixir
Mix.install([
{:mdex, "~> 0.12"},
{:lumis, "~> 0.1"},
{: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{}](https://hexdocs.pm/lumis/Lumis.Theme.html) or build one from scratch.
```elixir
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
)
```
<!-- livebook:{"output":true} -->
```
%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}
},
...
}
}
```
````elixir
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()
````