Mix.install([
{:mdex, "~> 0.12"},
{:kino, "~> 0.16"}
],
config: [mdex_native: [syntax_highlighter: :syntect]]
)What Syntect does
Syntect highlights code with Sublime Text grammars. MDEx exposes it as a syntax highlighting engine:
syntax_highlight: [engine: :syntect, opts: [theme: "Catppuccin Macchiato"]]Theme names come from the supported two-face themes.
To use it first you need to configure mdex_native before dependencies compile in your project config:
config :mdex_native, syntax_highlighter: :syntectInline themed output
When you pass a theme, Syntect writes inline styles into the generated HTML.
options = [
syntax_highlight: [engine: :syntect, opts: [theme: "Catppuccin Macchiato"]]
]
~S"""
# Syntect theme
```rust
fn main() {
println!("hello from syntect");
}
```
"""
|> MDEx.to_html!(options)
|> Kino.HTML.new()Multiple languages
The language comes from the Markdown fence, the same as with Lumis.
options = [
syntax_highlight: [engine: :syntect, opts: [theme: "Catppuccin Macchiato"]]
]
~S"""
# Syntect with a few languages
```elixir
Enum.map([1, 2, 3], &(&1 * 2))
```
```javascript
const doubled = [1, 2, 3].map((n) => n * 2)
```
```rust
let doubled: Vec<_> = [1, 2, 3].iter().map(|n| n * 2).collect();
```
"""
|> MDEx.to_html!(options)
|> Kino.HTML.new()