Syntect syntax highlighting

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

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.

Inline 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()