8c806d1654
Self-documenting docs site built with sukr itself (dogfooding): - docs/site.toml with sukr.io base URL - docs-specific templates with sidebar navigation - Dark theme CSS, responsive layout - Documentation: getting-started, configuration, features Also: improved error chaining for better template debugging
1.8 KiB
1.8 KiB
title, description, weight
| title | description | weight |
|---|---|---|
| Syntax Highlighting | Build-time code highlighting with Tree-sitter | 3 |
Syntax Highlighting
sukr highlights code blocks at build time using Tree-sitter. 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 |
How It Works
- During Markdown parsing, code blocks are intercepted
- Tree-sitter parses the code and generates a syntax tree
- Spans are generated with semantic CSS classes
- All work happens at build time
Styling
Highlighted code uses semantic CSS classes:
.keyword {
color: #ff79c6;
}
.string {
color: #f1fa8c;
}
.function {
color: #50fa7b;
}
.comment {
color: #6272a4;
}
.number {
color: #bd93f9;
}
The exact classes depend on the language grammar.
Nix Language Support
sukr includes full Nix highlighting with injection support. Bash code inside buildPhase and similar attributes is highlighted correctly:
stdenv.mkDerivation {
buildPhase = ''
echo "Building..."
make -j$NIX_BUILD_CORES
'';
}
Fallback
Unknown languages fall back to plain <code> blocks without highlighting.