Syntax Highlighting

Build-time code highlighting with Tree-sitter and tree-house

sukr highlights code blocks at build time using tree-house (Helix editor's Tree-sitter integration). No client-side JavaScript required.

Usage¶

Use fenced code blocks with a language identifier:

```rust
fn main() {
    println!("Hello, world!");
}
```

Supported Languages¶

Language	Identifier
Rust	`rust`, `rs`
Python	`python`, `py`
JavaScript	`javascript`, `js`
TypeScript	`typescript`, `ts`
Go	`go`, `golang`
Bash	`bash`, `sh`, `shell`
Nix	`nix`
TOML	`toml`
YAML	`yaml`, `yml`
JSON	`json`
HTML	`html`
CSS	`css`
Markdown	`markdown`, `md`
C	`c`

Examples¶

Rust¶

fn main() {
    println!("Hello, world!");
}

Python¶

def greet(name: str) -> str:
    return f"Hello, {name}!"

JavaScript¶

const greet = (name) => `Hello, ${name}!`;

TypeScript¶

function greet(name: string): string {
  return `Hello, ${name}!`;
}

Go¶

func main() {
    fmt.Println("Hello, world!")
}

Bash¶

#!/bin/bash
echo "Hello, $USER!"

Nix¶

{ pkgs }:
pkgs.mkShell { buildInputs = [ pkgs.hello ]; }

TOML¶

[package]
name = "sukr"
version = "0.1.0"

YAML¶

name: Build
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest

JSON¶

{
  "name": "sukr",
  "version": "0.1.0"
}

HTML¶

<!DOCTYPE html>
<html>
  <body>
    Hello!
  </body>
</html>

CSS¶

.container {
  display: flex;
  color: #ff79c6;
}

C¶

#include <stdio.h>
int main() {
    printf("Hello!\n");
    return 0;
}

How It Works¶

During Markdown parsing, code blocks are intercepted
tree-house parses the code and generates a syntax tree
Spans are generated with hierarchical CSS classes (e.g., .hl-keyword-control-return)
All work happens at build time—zero JavaScript in the browser

Theme System¶

sukr uses a decoupled theme system with CSS custom properties. Themes are separate CSS files that define colors for syntax highlighting classes.

Hierarchical Scopes¶

Highlighting uses fine-grained scope classes with hierarchical fallback:

Scope Class	Description
`.hl-keyword`	Generic keywords
`.hl-keyword-control`	Control flow
`.hl-keyword-control-return`	return/break/continue
`.hl-function`	Function names
`.hl-function-builtin`	Built-in functions
`.hl-type`	Type names
`.hl-variable`	Variables
`.hl-variable-parameter`	Function parameters
`.hl-string`	String literals
`.hl-comment`	Comments
`.hl-comment-block-documentation`	Doc comments

If a theme only defines .hl-keyword, it will apply to all keyword subtypes.

Using a Theme¶

Themes are CSS files that define the color palette. Import a theme at the top of your stylesheet:

@import "path/to/theme.css";

sukr uses lightningcss which inlines @import rules at build time, producing a single bundled CSS file.

Available Themes¶

sukr includes several themes in the themes/ directory:

dracula.css — Classic Dracula colors
gruvbox.css — Warm retro palette
nord.css — Cool arctic colors
github_dark.css — GitHub's dark mode
github_light.css — GitHub's light mode
snazzy.css — Vibrant modern colors
catppuccin_mocha.css — Warm pastel dark theme
tokyonight.css — Japanese-inspired dark theme
rose_pine.css — Elegant soho-inspired theme
onedark.css — Classic Atom editor theme

Copy the theme files to your project and import as shown above.

Theme Structure¶

Themes use CSS custom properties for easy customization:

:root {
  --hl-keyword: #ff79c6;
  --hl-string: #f1fa8c;
  --hl-function: #50fa7b;
  --hl-comment: #6272a4;
}

.hl-keyword {
  color: var(--hl-keyword);
}
.hl-string {
  color: var(--hl-string);
}
/* ... */

Injection Support¶

Some languages support injection—highlighting embedded languages. For example, bash inside Nix strings:

stdenv.mkDerivation {
  buildPhase = ''
    echo "Building..."
    make -j$NIX_BUILD_CORES
  '';
}

Markdown also supports injection—code blocks inside markdown fences are highlighted with their respective languages.

Languages with injection support: Bash, C, CSS, Go, HTML, JavaScript, Markdown, Nix, Python, Rust, TOML, TypeScript, YAML.

Fallback¶

Unknown languages fall back to plain <code> blocks without highlighting.