Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leandrocp/autumn
Syntax highlighter for source code parsed with Tree-Sitter and styled with Helix Editor themes.
https://github.com/leandrocp/autumn
elixir rust syntax-highlighter syntax-highlighting tree-sitter
Last synced: 6 days ago
JSON representation
Syntax highlighter for source code parsed with Tree-Sitter and styled with Helix Editor themes.
- Host: GitHub
- URL: https://github.com/leandrocp/autumn
- Owner: leandrocp
- License: mit
- Created: 2023-09-21T20:15:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-14T22:29:06.000Z (8 days ago)
- Last Synced: 2025-01-15T04:14:04.968Z (8 days ago)
- Topics: elixir, rust, syntax-highlighter, syntax-highlighting, tree-sitter
- Language: HTML
- Homepage: https://autumn-30n.pages.dev
- Size: 19.1 MB
- Stars: 46
- Watchers: 2
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Autumn
Syntax highlighter for source code parsed with Tree-Sitter and styled with Helix Editor themes.
## Features
- Support [multiple languages](https://github.com/leandrocp/autumn/blob/main/native/inkjet_nif/Cargo.toml#L16) and [100+ themes](https://github.com/leandrocp/autumn/tree/main/priv/themes). Check out some samples at https://autumn-30n.pages.dev
- Used by [MDEx](https://github.com/leandrocp/mdex) - a fast 100% CommonMark-compatible GitHub Flavored Markdown parser and formatter for Elixir
- Use Rust's [inkjet crate](https://crates.io/crates/inkjet) under the hood
## Installation
Add `:autumn` dependency:
```elixir
def deps do
[
{:autumn, "~> 0.2"}
]
end
```
## Usage
```elixir
Autumn.highlight!("elixir", "Atom.to_string(:elixir)") |> IO.puts()
#=>
#=>
#=> Atom.to_string(:elixir)
#=>
#=>
```
## 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:
```html
Atom
```
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:
```elixir
Autumn.highlight!("elixir", "Atom.to_string(:elixir)", inline_style: false) |> IO.puts()
# rest ommited for brevity
# `style` is no longer generated
#=>
```
And then you need to serve any of of the [available CSS themes](https://github.com/leandrocp/autumn/tree/main/priv/static/css) 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:
```elixir
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:
```html
```
You can also copy the content of that theme file into a `` tag in your template or serve that file from a CDN.
## Samples
Visit https://autumn-30n.pages.dev to see all [available samples](https://github.com/leandrocp/autumn/tree/main/priv/generated/samples) like the ones below:
<img src="https://raw.githubusercontent.com/leandrocp/autumn/main/assets/images/elixir_onedark.png" alt="Elixir source code in onedark theme">
<img src="https://raw.githubusercontent.com/leandrocp/autumn/main/assets/images/elixir_github_light.png" alt="Elixir source code in github_light theme">
## Looking for help with your Elixir project?
<img src="https://raw.githubusercontent.com/leandrocp/autumn/main/assets/images/dockyard_logo.png" width="256" alt="DockYard logo">
At DockYard we are [ready to help you build your next Elixir project](https://dockyard.com/phoenix-consulting).
We have a unique expertise in Elixir and Phoenix development that is unmatched and we love to [write about Elixir](https://dockyard.com/blog/categories/elixir).
Have a project in mind? [Get in touch](https://dockyard.com/contact/hire-us)!
## Acknowledgements
* [Logo](https://www.flaticon.com/free-icons/fall) created by by pongsakornRed - Flaticon
* [Logo font](https://fonts.google.com/specimen/Sacramento) designed by [Astigmatic](http://www.astigmatic.com)