Packages
mdex
0.13.1
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/syntect.livemd
<!-- livebook:{"persist_outputs":true} -->
# Syntect syntax highlighting
```elixir
Mix.install([
{:mdex, "~> 0.12"},
{:kino, "~> 0.16"}
],
config: [mdex_native: [syntax_highlighter: :syntect]]
)
```
## What Syntect does
[Syntect](https://crates.io/crates/syntect) highlights code with Sublime Text grammars. MDEx exposes it as a syntax highlighting engine:
<!-- livebook:{"force_markdown":true} -->
```elixir
syntax_highlight: [engine: :syntect, opts: [theme: "Catppuccin Macchiato"]]
```
Theme names come from the supported [two-face](https://crates.io/crates/two-face) themes.
To use it first you need to configure [mdex_native](https://mdex-native.hexdocs.pm/MDExNative.html) before dependencies compile in your project config:
<!-- livebook:{"force_markdown":true} -->
```elixir
config :mdex_native, syntax_highlighter: :syntect
```
## Inline themed output
When you pass a theme, Syntect writes inline styles into the generated HTML.
````elixir
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.
````elixir
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()
````