Skip to content

Syntax highlighter for source code parsed with Tree-Sitter and styled with Helix Editor themes.

License

Notifications You must be signed in to change notification settings

leandrocp/autumn

Repository files navigation

Autumn

Autumn logo

Syntax highlighter for source code parsed with Tree-Sitter and styled with Helix Editor themes.

Hex Version Hex Docs MIT

Features

Installation

Add :autumn dependency:

def deps do
  [
    {:autumn, "~> 0.2"}
  ]
end

Usage

Autumn.highlight!("elixir", "Atom.to_string(:elixir)") |> IO.puts()
#=> <pre class="autumn-hl" style="background-color: #282C34; color: #ABB2BF;">
#=>   <code class="language-elixir" translate="no">
#=>     <span class="ahl-namespace" style="color: #61AFEF;">Atom</span><span class="ahl-operator" style="color: #C678DD;">.</span><span class="ahl-function" style="color: #61AFEF;">to_string</span><span class="ahl-punctuation ahl-bracket" style="color: #ABB2BF;">(</span><span class="ahl-string ahl-special ahl-symbol" style="color: #98C379;">:elixir</span><span class="ahl-punctuation ahl-bracket" style="color: #ABB2BF;">)</span>
#=>   </code>
#=> </pre>

Styles mode

There are 2 modes to syntax highlight source code, the default is embedding inline styles in each one of the generated tokens, and the other more effective is relying on CSS classes to style the tokens.

Inline

Inlining styles will look like:

<span class="ahl-operator" style="color: #C678DD;">Atom</span>

That mode is easy and works fine for simple cases but in pages with multiple code blocks you might want to use CSS instead.

Linked

First you need to disable inline styles by passing false to the :inline_style option:

Autumn.highlight!("elixir", "Atom.to_string(:elixir)", inline_style: false) |> IO.puts()
# rest ommited for brevity
# `style` is no longer generated
#=> <span class="ahl-operator">

And then you need to serve any of of the available CSS themes in your app.

If you're using Phoenix you can serve them from your app, just add the following Plug into your app's endpoint.ex file:

plug Plug.Static,
  at: "/themes",
  from: {:autumn, "priv/static/css/"},
  only: ["dracula.css"] # choose any theme you want

The style will be served at /themes/dracula.css. In your local environemnt that resolves to http://localhost:4000/themes/dracula.css so finally add to your template:

<link phx-track-static rel="stylesheet" href={~p"/themes/dracula.css"} />

You can also copy the content of that theme file into a <style> tag in your template or serve that file from a CDN.

Samples

Visit https://autumn-30n.pages.dev to see all available samples like the ones below:

Elixir source code in onedark theme

Elixir source code in github_light theme

Looking for help with your Elixir project?

DockYard logo

At DockYard we are ready to help you build your next Elixir project. We have a unique expertise in Elixir and Phoenix development that is unmatched and we love to write about Elixir.

Have a project in mind? Get in touch!

Acknowledgements