HEEx highlighting in Emacs with Tree Sitter

by Justin Smestad

The snippet assumes:

  • npm install -g tree-sitter-cli@0.19
  • web-mode is the base mode for editing .html.heex files today.
  • You are building for Apple Silicon. Update -target for your architecture if you need. You can learn more about available targets and the gcc command from the tree-sitter-langs source.
;; If you use web-mode.el

(define-derived-mode heex-mode web-mode "HEEx"
                     "Major mode for editing HEEx files")
(add-to-list 'auto-mode-alist '("\\.heex?\\'" . heex-mode))


(use-package tree-sitter
  :hook (prog-mode . (lambda ()
                        (require 'tree-sitter)
                        (require 'tree-sitter-langs)
                        (require 'tree-sitter-hl)
                        (tree-sitter-hl-mode)
                     ))
  :config
  ;; Directory to store grammers custom into
  (add-to-list 'tree-sitter-load-path (file-name-as-directory "~/.local/share/tree-sitter/"))

  ;; Add HEEx for tree-sitter:
  ;;
  ;; 1. git clone https://github.com/phoenixframework/tree-sitter-heex.git
  ;; 2. gcc -shared -fPIC -g -O2 -I src src/parser.c -o ./heex.so -target aarch64-apple-darwin
  ;; 3. cp ./heex.so ~/.local/share/tree-sitter/
  (tree-sitter-load 'heex)
  (add-to-list 'tree-sitter-major-mode-language-alist '(heex-mode . heex))
)


(use-package tree-sitter-langs)

Enjoy!