Code Monkey home page Code Monkey logo

autumn's Introduction

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.1"}
  ]
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

autumn's People

Contributors

leandrocp avatar paradox460 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

paradox460

autumn's Issues

Lua doesn't seem to work

I noticed that lua doesn't seem to actually tokenize and render into anything.

example

┌─ 01:09:15 PM
│mitchell in 🌐 nublar in blog on  main [?⇡] via  v1.16.1 (OTP 26) took 36s
└─  iex
Erlang/OTP 26 [erts-14.2.2] [source] [64-bit] [smp:32:32] [ds:32:32:10] [async-threads:1] [jit:ns]

Interactive Elixir (1.16.1) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> Mix.install [:autumn]
Resolving Hex dependencies...
Resolution completed in 0.066s
New:
  autumn 0.1.5
  castore 1.0.6
  rustler_precompiled 0.7.1
  toml 0.7.0
* Getting autumn (Hex package)
* Getting rustler_precompiled (Hex package)
* Getting toml (Hex package)
* Getting castore (Hex package)
==> toml
Compiling 10 files (.ex)
Generated toml app
==> castore
Compiling 1 file (.ex)
Generated castore app
==> rustler_precompiled
Compiling 4 files (.ex)
Generated rustler_precompiled app
==> autumn
Compiling 5 files (.ex)

13:09:37.574 [debug] Downloading NIF from https://github.com/leandrocp/autumn/releases/download/v0.1.5/libinkjet_nif-v0.1.5-nif-2.15-x86_64-unknown-linux-gnu.so.tar.gz

13:09:38.365 [debug] NIF cached at /home/mitchell/.cache/rustler_precompiled/precompiled_nifs/libinkjet_nif-v0.1.5-nif-2.15-x86_64-unknown-linux-gnu.so.tar.gz and extracted to /home/mitchell/.cache/mix/installs/elixir-1.16.1-erts-14.2.2/0c46c564577fb109b3bf673cf29529d4/_build/dev/lib/autumn/priv/native/libinkjet_nif-v0.1.5-nif-2.15-x86_64-unknown-linux-gnu.so
Generated autumn app
:ok
iex(2)> Autumn.highlight!("lua", "os.foo({ foo = bar})", theme: "dracula") |> IO.puts()
<pre class="autumn highlight" style="background-color: #282A36; color: #f8f8f2;"><code class="language-lua" translate="no">os.foo({ foo = bar})</code></pre>
:ok
iex(3)>

not sure if this is an inket thing or an autumn thing tho.

Explore Zed languages and themes

For syntax highlight to work, it must load a language grammar that defines all scopes for each source code token that matches a class in the CSS theme file.

Currently we rely on Helix language definitions and themes which means we depend on Helix's project to maintain those files in order to generate the right colors at the end of the day.

For example the Elixir grammar defines a @namespace scope even though the official grammar doesn't define such scope. That means all themes must consider that scope to highlight Elixir code properly, otherwise Autumn fallbacks to the foreground color. For example the Dracula theme doesn't define that scope and will render a white text where you'd expect to see some color (module names), see https://autumn-30n.pages.dev/elixir_dracula

This approach saves a bunch of time but on the other hand brings the problem explained above. The fix to this problem could be:

  • Fix the language/theme upstream (helix repo)
  • Use the official tree-sitter grammar instead of Helix's - some languages take this approach but it causes mismatches with the themes in Helix
  • Fork languages/themes in Autumn to apply specific fixes

While those fixes are doable, another approach is loading Zed languages and themes since those seems to be more updated and renders colors more accurately. The downside is that Zed doesn't support all languages we need at this moment, in special Swift that we use at https://dockyard.com/blog

To conclude, we would benefit having a mixed approach using Zed as the main source for languages/themes and fallback to Helix, until we can eventually drop Helix at all.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.