feat: highlight code with Zola instead of highlight.js - #18
Merged
Conversation
Code blocks were highlighted in the browser by a highlight.js bundle carrying only the Flix grammar, which meant every other language had to be opted out of highlighting entirely -- Scala, shell, Rust and Markdown blocks rendered as plain text. Zola highlights them at build time instead, using the TextMate grammar from flix/textmate that flix.dev already uses, so both sites now colour Flix from one grammar. `make` fetches it, pinned to a commit for reproducibility. The colours come from Catppuccin Mocha, generated by Zola into static/giallo.css: the same family tabi's own syntax stylesheet was derived from, and near the value tabi gave code blocks before, but with 381 rules behind it rather than 65. Operators, escapes and language constants are distinguished for the first time. Zola 0.22 replaced syntect with giallo, so extra grammars are VSCode JSON rather than .sublime-syntax, and the highlighting options moved into [markdown.highlighting]. Drops 22K of vendored JS, the two hand-written stylesheets that shadowed it, and the local patch to tabi's header.html -- the theme is stock again. Closes #7 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
`mkdir -p` and `rm -f` are not commands cmd.exe has, and GNU Make only picks sh.exe when one happens to be on PATH -- so a contributor who installed make without Git Bash or WSL hit a failure on the first recipe line. curl --create-dirs makes the directory itself, and the giallo.css cleanup is gone: it existed so a theme change would take effect, which is rare enough to document rather than pay for on every build. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Windows ships no make -- not in cmd.exe, not in PowerShell, and not with Git for Windows -- so requiring `make` to assemble the tree meant a contributor had to install a build tool the OS has never carried, where `zola serve` used to be the whole workflow. The grammar is now committed at syntaxes/flix.tmLanguage.json, byte-identical to flix/textmate at the pinned commit, so a clone builds with nothing but Zola. `make update-grammar` refreshes it after bumping GRAMMAR_COMMIT, and the result arrives as a reviewable diff rather than an invisible pin. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #7.
The issue asked whether highlighting could move to a sublime-style grammar. It can move off highlight.js, but not to
.sublime-syntax: Zola 0.22 (which this repo already runs) replaced syntect with giallo, so extra grammars are VSCode/TextMate JSON and the config moved into[markdown.highlighting]. Feeding it theFlix.sublime-syntaxfromflix/talksfails with a JSON parse error.The grammar it does want already exists: flix/textmate, which flix.dev consumes the same way. Both sites now colour Flix from one grammar.
What changes
syntaxes/flix.tmLanguage.jsonis vendored, byte-identical toflix/textmateat the pinnedGRAMMAR_COMMIT, so a clone builds with nothing but Zola.make update-grammarrefreshes it after bumping the SHA, and the result lands as a reviewable diff.static/giallo.css. That is the family tabi's own syntax stylesheet was derived from, and its ground (#1E1E2E) and base text (#CDD6F4) sit right where tabi had them — with 381 rules behind it instead of tabi's 65.themes/tabi/templates/partials/header.htmlis stock again, so tabi updates no longer need re-patching.syntaxes/flix.tmLanguage.json,static/giallo.css) are gitignored.What it looks like
Nine colours across the blog's Flix blocks, against four under the old setup; operators, escapes and language constants are distinguished for the first time. Scala, shell, Rust and Markdown blocks are highlighted at all for the first time —
highlight_activate.jshad to forcenohighlighton everything except Flix, because the bundle carried only the Flix grammar.Trade-offs worth reviewing
```shnow readsSHELLSCRIPT, and```claude,```promptand```txt(15 blocks) readPLAIN. Renaming those fences is a follow-up if the labels matter.flix/textmatehas noentity.name.functionorsupport.functionrules, so no theme can recover them. Fixing that upstream would benefit flix.dev too.flix/textmateuntil someone bumps the SHA and runsmake update-grammar. The alternative — fetching at build time — was tried first and dropped: it mademakemandatory, and Windows ships nomake, so it would have cost Windows contributors the plainzola serveworkflow they have today.static/giallo.cssdeleted by hand. Zola writes that file only when it is absent, so the old colours otherwise survive a rebuild and a runningzola serve. Documented in the README rather than handled in the Makefile, which would have cost portability on every build for something done once a year.Verified: clean-tree
makebuilds in 0.4s, a secondmakeis idempotent, and CI needs no change — the workflow already runsmake.🤖 Generated with Claude Code