The snippet assumes:

  • npm install -g [email protected]
  • 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)
  ;; 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
  ;; 2. gcc -shared -fPIC -g -O2 -I src src/parser.c -o ./ -target aarch64-apple-darwin
  ;; 3. cp ./ ~/.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)