Autumn

Syntax highlighter powered by Tree-sitter and Neovim themes.

https://autumnus.dev

Features

🌳 70+ languages with tree-sitter parsing
🎨 120+ Neovim themes
📝 HTML output with inline styles or CSS classes
🖥️ Terminal output with ANSI colors
🔍 Language auto-detection
🎯 Customizable formatting options
✨ Line highlighting with custom styling
🎁 Custom HTML wrappers for code blocks

Installation

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

Usage

Basic Usage (HTML Inline)

iex> Autumn.highlight!("Atom.to_string(:elixir)", language: "elixir")
~s|<pre class="athl" style="color: #abb2bf; background-color: #282c34;"><code class="language-elixir" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color: #e5c07b;">Atom</span><span style="color: #56b6c2;">.</span><span style="color: #61afef;">to_string</span><span style="color: #c678dd;">(</span><span style="color: #e06c75;">:elixir</span><span style="color: #c678dd;">)</span>
</span></code></pre>|

See the HTML Linked and Terminal formatters below for more options.

Language Auto-detection

iex> Autumn.highlight!("#!/usr/bin/env bash\nID=1")
~s|<pre class="athl" style="color: #abb2bf; background-color: #282c34;"><code class="language-bash" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color: #c678dd;">#!/usr/bin/env bash</span>
</div><div class="line" data-line="2"><span style="color: #d19a66;">ID</span><span style="color: #56b6c2;">=</span><span style="color: #d19a66;">1</span>
</span></code></pre>|

Themes

Themes are sourced from popular Neovim colorschemes.

Use Autumn.available_themes/0 to list all available themes. You can specify a theme by name in the formatter options, or use Autumn.Theme.get/1 to get a specific theme struct if you need to inspect or manipulate its styles.

# Using theme name in formatter options
iex> Autumn.highlight!("setTimeout(fun, 5000);", language: "js", formatter: {:html_inline, theme: "github_light"})
~s|<pre class="athl" style="color: #1f2328; background-color: #ffffff;"><code class="language-javascript" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color: #6639ba;">setTimeout</span><span style="color: #1f2328;">(</span><span style="color: #1f2328;">fun</span><span style="color: #1f2328;">,</span> <span style="color: #0550ae;">5000</span><span style="color: #1f2328;">)</span><span style="color: #1f2328;">;</span>
</span></code></pre>|

# Using theme struct
iex> theme = Autumn.Theme.get("github_light")
iex> Autumn.highlight!("setTimeout(fun, 5000);", language: "js", formatter: {:html_inline, theme: theme})

Bring Your Own Theme

You can also load custom themes from JSON files or strings:

# Load from JSON file
{:ok, theme} = Autumn.Theme.from_file("/path/to/your/theme.json")
Autumn.highlight!("your code", theme: theme)

# Load from JSON string
theme_json = ~s({"name": "my_theme", "appearance": "dark", "highlights": {"comment": {"fg": "#808080"}}})
{:ok, theme} = Autumn.Theme.from_json(theme_json)
Autumn.highlight!("your code", theme: theme)

Incomplete or Malformed code

It's also capable of handling incomplete or malformed code, useful for streaming like in a ChatGPT interface:

iex> Autumn.highlight!("const header = document.getEl", language: "js")
~s|<pre class="athl" style="color: #abb2bf; background-color: #282c34;"><code class="language-javascript" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color: #c678dd;">const</span> <span style="color: #abb2bf;">header</span> <span style="color: #abb2bf;">=</span> <span style="color: #e86671;">document</span><span style="color: #848b98;">.</span><span style="color: #56b6c2;">getEl</span>
</span></code></pre>|

Formatters

Autumn supports four output formatters:

All HTML formatters wrap each line in a <div class="line"> element with a data-line attribute containing the line number, making it easy to add line numbers or implement line-based features in your application.

See the Livebook examples and t:formatter/0 for more.

HTML Inline (Default)

Generates HTML with inline styles for each token:

iex> Autumn.highlight!("Atom.to_string(:elixir)", language: "elixir", formatter: :html_inline)
# or with options
iex> Autumn.highlight!("Atom.to_string(:elixir)", language: "elixir", formatter: {:html_inline, pre_class: "my-code", italic: true, include_highlights: true})

Options:

:pre_class - CSS class for the <pre> tag
:italic - enable italic styles
:include_highlights - include highlight scope names in data-highlight attributes
:highlight_lines - highlight specific lines with custom styling
:header - wrap the highlighted code with custom HTML elements

HTML Linked

Generates HTML with CSS classes for styling:

iex> Autumn.highlight!("Atom.to_string(:elixir)", language: "elixir", formatter: :html_linked)
# or with options
iex> Autumn.highlight!("Atom.to_string(:elixir)", language: "elixir", formatter: {:html_linked, pre_class: "my-code"})

Options:

:pre_class - CSS class for the <pre> tag
:highlight_lines - highlight specific lines with custom CSS class
:header - wrap the highlighted code with custom HTML elements

To use linked styles, you need to include one of the available CSS themes in your app.

For Phoenix apps, add this to your endpoint.ex:

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

Then add the stylesheet to your template:

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

HTML Multi-Themes

Generates HTML with CSS custom properties (variables) for multiple themes, enabling light/dark mode support. Inspired by Shiki Dual Themes.

# Basic dual theme with CSS variables
iex> Autumn.highlight!("Atom.to_string(:elixir)",
  language: "elixir",
  formatter: {:html_multi_themes,
    themes: [light: "github_light", dark: "github_dark"]
  }
)

# With light-dark() function for automatic theme switching
iex> Autumn.highlight!("Atom.to_string(:elixir)",
  language: "elixir",
  formatter: {:html_multi_themes,
    themes: [light: "github_light", dark: "github_dark"],
    default_theme: "light-dark()"
  }
)

The generated HTML includes CSS custom properties like --athl-light, --athl-dark, --athl-{theme}-bg, and font styling variables (-font-style, -font-weight, -text-decoration) that can be used with CSS media queries or JavaScript for theme switching:

/* Automatic light/dark mode based on system preference */
@media (prefers-color-scheme: dark) {
  .athl,
  .athl span {
    color: var(--athl-dark) !important;
    background-color: var(--athl-dark-bg) !important;
    font-style: var(--athl-dark-font-style) !important;
    font-weight: var(--athl-dark-font-weight) !important;
    text-decoration: var(--athl-dark-text-decoration) !important;
  }
}

/* Manual control with class-based switching */
html.dark .athl,
html.dark .athl span {
  color: var(--athl-dark) !important;
  background-color: var(--athl-dark-bg) !important;
  font-style: var(--athl-dark-font-style) !important;
  font-weight: var(--athl-dark-font-weight) !important;
  text-decoration: var(--athl-dark-text-decoration) !important;
}

Options:

:themes (required) - keyword list mapping theme identifiers to theme names, e.g., [light: "github_light", dark: "github_dark"]
:default_theme - controls inline color rendering: theme identifier for inline colors, "light-dark()" for CSS function, or nil for CSS variables only
:css_variable_prefix - custom CSS variable prefix (default: "--athl")
:pre_class - CSS class for the <pre> tag
:italic - enable italic styles
:include_highlights - include highlight scope names in data-highlight attributes
:highlight_lines - highlight specific lines with custom styling
:header - wrap the highlighted code with custom HTML elements

Terminal

Generates ANSI escape codes for terminal output:

iex> Autumn.highlight!("Atom.to_string(:elixir)", language: "elixir", formatter: :terminal)
# or with options
iex> Autumn.highlight!("Atom.to_string(:elixir)", language: "elixir", formatter: {:terminal, theme: "github_light"})

Options:

:theme - theme to apply styles

Samples

Visit https://autumnus.dev to check out some examples.

Acknowledgements

Logo created by by pongsakornRed - Flaticon
Logo font designed by Astigmatic
Makeup for setting up the baseline and for the inspiration
Inkjet for the Rust implementation up to v0.2 and for the inspiration

Name		Name	Last commit message	Last commit date
Latest commit History 211 Commits
.github		.github
assets/images		assets/images
examples		examples
lib		lib
native/autumnus_nif		native/autumnus_nif
priv		priv
test		test
.formatter.exs		.formatter.exs
.gitignore		.gitignore
AGENTS.md		AGENTS.md
CHANGELOG.md		CHANGELOG.md
LICENSE.md		LICENSE.md
README.md		README.md
justfile		justfile
mix.exs		mix.exs
mix.lock		mix.lock
usage-rules.md		usage-rules.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Repository files navigation

Autumn

Features

Installation

Usage

Basic Usage (HTML Inline)

Language Auto-detection

Themes

Bring Your Own Theme

Incomplete or Malformed code

Formatters

HTML Inline (Default)

HTML Linked

HTML Multi-Themes

Terminal

Samples

Acknowledgements

About

Uh oh!

Releases 27

Sponsor this project

Uh oh!

Uh oh!

Contributors 3

Languages

Uh oh!

License

leandrocp/autumn

Folders and files

Latest commit

History

Repository files navigation

Autumn

Features

Installation

Usage

Basic Usage (HTML Inline)

Language Auto-detection

Themes

Bring Your Own Theme

Incomplete or Malformed code

Formatters

HTML Inline (Default)

HTML Linked

HTML Multi-Themes

Terminal

Samples

Acknowledgements

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 27

Sponsor this project

Uh oh!

Uh oh!

Contributors 3

Languages