Packages
mdex
0.12.5
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
Retired package: Release invalid - Introduced breaking changes without proper guides
Security advisory:
This version has known vulnerabilities.
View advisories
Current section
Files
Jump to
Current section
Files
examples/syntax_highlight.livemd
<!-- livebook:{"persist_outputs":true} -->
# Syntax highlighting
```elixir
Mix.install([
{:mdex, "~> 0.12"},
{:kino, "~> 0.16"}
])
```
## Pick an engine
MDEx can highlight fenced code blocks with [Lumis](https://hex.pm/packages/lumis) or [Syntect](https://crates.io/crates/syntect).
Lumis is the default. It uses Tree-sitter and Lumis themes:
<!-- livebook:{"force_markdown":true} -->
```elixir
syntax_highlight: [engine: :lumis, opts: [formatter: {:html_inline, theme: "github_light"}]]
```
Syntect uses Sublime Text grammars and can use themes from [two-face](https://crates.io/crates/two-face):
<!-- livebook:{"force_markdown":true} -->
```elixir
syntax_highlight: [engine: :syntect, opts: [theme: "Catppuccin Macchiato"]]
```
If you do not pass `:syntax_highlight`, MDEx uses Lumis with inline HTML and the `onedark` theme.
Set `syntax_highlight: nil` or `syntax_highlight: false` to disable built-in highlighting.
## Side by side
````elixir
markdown = ~S"""
# Same code, different engine
```elixir
def hello(name), do: "Hello, #{name}!"
```
"""
lumis_html =
MDEx.to_html!(markdown,
syntax_highlight: [engine: :lumis, opts: [formatter: {:html_inline, theme: "catppuccin_frappe"}]]
)
syntect_html =
MDEx.to_html!(markdown,
syntax_highlight: [engine: :syntect, opts: [theme: "Catppuccin Frappe"]]
)
Kino.Layout.grid([
Kino.HTML.new("<h3>Lumis</h3>#{lumis_html}"),
Kino.HTML.new("<h3>Syntect</h3>#{syntect_html}")
])
````
## Passing options
Syntax highlighting is configured through regular MDEx options:
<!-- livebook:{"force_markdown":true} -->
```elixir
MDEx.to_html!(markdown,
syntax_highlight: [engine: :lumis, opts: [formatter: {:html_inline, theme: "github_light"}]]
)
```
If another library calls MDEx for you, pass the same option through that library's MDEx configuration.
For Tableau:
<!-- livebook:{"force_markdown":true} -->
```elixir
config :tableau, :config,
markdown: [
mdex: [
syntax_highlight: [engine: :lumis, opts: [formatter: {:html_inline, theme: "github_light"}]]
]
]
```
## More examples
Use [Lumis syntax highlighting](https://mdex.hexdocs.pm/lumis.html) for Lumis formatters, linked CSS, line highlights, light/dark themes, and code fence decorators.
Use [Syntect syntax highlighting](https://mdex.hexdocs.pm/syntect.html) for Syntect themes and output shape.
Code fence decorators such as `highlight_lines` and per-block `theme` are Lumis options. See `examples/code_block_decorators.livemd` for those.
<!-- livebook:{"offset":2505,"stamp":{"token":"XCP.78XMwA6R3sfW4n2tgYulKMOWf1JzbvC_WRMx4PaNB6fSjkxKsBDbipxe9svjvBZCLmWsqnZxBnYzWADPgAJaQbvp1nmUwNk7XV1DfL9ea0jI8vvVMDjfCN2PE0w","version":2}} -->