Custom Theme

Mix.install([
  {:mdex, "~> 0.8"},
  {:kino, "~> 0.16"}
])

Example

Below we’ll customize an existing theme but any %Autumn.Theme{} would work, even if built from scratch.

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

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

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

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

options = [
  syntax_highlight: [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()