README.md

Elixir Tree Sitter Highlight

This packages uses Tree-sitter to transform source code into highlighted HTML.

This is implemented with a nif binding to the rust crate tree_sitter_higlight.

Why not makeup?

The main advantage is that adding language support is much easier since many Tree-sitter grammars have already been written. Tree-sitter can also handle language injections, e.g. it can highlight heex code inside of an elixir string.

Installation

The package can be installed by adding ex_tree_sitter_highlight to your list of dependencies in mix.exs:

def deps do
  [
    {:ex_tree_sitter_highlight, "~> 0.2.0"}
  ]
end

Usage

Supported languages:

iex(1)> TreeSitterHighlight.get_supported_languages
[:c, :css, :elixir, :go, :haskell, :heex, :html, :javascript, :json, :rust]

Render html:

iex(2)> TreeSitterHighlight.render_html("1", :elixir)
{:ok,
 "<pre class=\"code-block language-elixir\"><code>\n<div class=\"line-wrapper\"><span class=\"line-number\">1</span><span class=\"token number\">1</span>\n</div>\n</code></pre>\n"}

Get the default stylesheet:

iex(3)> TreeSitterHighlight.get_default_css_content()
# returns content of priv/default.css

Example Output

Side by side comparison with Elixir Makeup:

https://knoebber.github.io/ex_tree_sitter_highlight/comparison.html

Simple UI for toggling dark mode / line numbers

https://knoebber.github.io/ex_tree_sitter_highlight/example_output/ex_tree_sitter_highlight/dark_mode_and_line_toggle.html

This project's rust source code:

https://knoebber.github.io/ex_tree_sitter_highlight/example_output/ex_tree_sitter_highlight/rust.html