Packages
mdex
0.11.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
Security advisory:
This version has known vulnerabilities.
View advisories
Current section
Files
Jump to
Current section
Files
examples/light_dark_theme.livemd
# Light Dark Theme
```elixir
Mix.install([
{:mdex, "~> 0.11"},
{:kino, "~> 0.18"}
])
```
## Intro
MDEx supports automatic light/dark mode switching for syntax highlighting using the `:html_multi_themes` formatter. This generates CSS that responds to the user's system color scheme preference, showing different themes without JavaScript.
## Example
````elixir
options = [
render: [unsafe: true],
syntax_highlight: [
formatter: {
:html_multi_themes,
themes: [light: "github_light", dark: "github_dark"],
default_theme: "light-dark()"
}
]
]
"""
# Light/Dark Example
_Change your OS system setting to see the colors change from light to dark and vice-versa._
```elixir
# elixir
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
```
<style>
/* Enable light/dark mode based on system preference */
html {
color-scheme: light dark;
}
</style>
"""
|> MDEx.to_html!(options)
|> Kino.HTML.new()
````