113b7e4a4c
- Update syntax-highlighting.md with tree-house integration details - Add themes/README.md explaining copy-to-project workflow - Add 13 tests: hierarchical scopes, injections (Nix+bash, MD, HTML) - All 64 tests passing
91 lines
2.4 KiB
Markdown
91 lines
2.4 KiB
Markdown
# Syntax Highlighting Themes
|
|
|
|
This directory contains CSS themes for sukr's syntax highlighting system.
|
|
|
|
## Available Themes
|
|
|
|
| Theme | Description |
|
|
| ------------------ | --------------------------- |
|
|
| `default.css` | Dracula-inspired dark theme |
|
|
| `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 |
|
|
|
|
## Usage
|
|
|
|
1. **Copy a theme** to your project's static directory
|
|
2. **Import it** in your main CSS file:
|
|
|
|
```css
|
|
@import "themes/default.css";
|
|
```
|
|
|
|
sukr uses [lightningcss](https://lightningcss.dev/) which bundles `@import` rules at build time—your final CSS will be a single minified file.
|
|
|
|
## Customization
|
|
|
|
Themes use CSS custom properties for easy customization. Override any variable in your own CSS:
|
|
|
|
```css
|
|
@import "themes/default.css";
|
|
|
|
/* Override just the keyword color */
|
|
:root {
|
|
--hl-keyword: #e879f9;
|
|
}
|
|
```
|
|
|
|
### Core Variables
|
|
|
|
All themes define these variables in `:root`:
|
|
|
|
| Variable | Description |
|
|
| --------------- | ---------------------- |
|
|
| `--hl-keyword` | Keywords, control flow |
|
|
| `--hl-string` | String literals |
|
|
| `--hl-function` | Function names |
|
|
| `--hl-comment` | Comments |
|
|
| `--hl-type` | Type names |
|
|
| `--hl-number` | Numeric literals |
|
|
| `--hl-variable` | Variables |
|
|
| `--hl-operator` | Operators |
|
|
|
|
## Hierarchical Scopes
|
|
|
|
sukr generates **hierarchical CSS classes** for fine-grained styling:
|
|
|
|
```html
|
|
<span class="hl-keyword-control-return">return</span>
|
|
```
|
|
|
|
Themes can style at any level of specificity:
|
|
|
|
```css
|
|
/* All keywords */
|
|
.hl-keyword {
|
|
color: var(--hl-keyword);
|
|
}
|
|
|
|
/* Just control-flow keywords */
|
|
.hl-keyword-control {
|
|
color: #ff79c6;
|
|
}
|
|
|
|
/* Just return/break/continue */
|
|
.hl-keyword-control-return {
|
|
font-weight: bold;
|
|
}
|
|
```
|
|
|
|
If a specific class isn't styled, highlighting falls back up the hierarchy.
|
|
|
|
## Creating Custom Themes
|
|
|
|
Start with `default.css` and modify the `:root` variables to create your own color scheme. The class rules reference these variables, so changing values updates the entire theme.
|
|
|
|
## Note
|
|
|
|
These themes are **not bundled into the sukr binary**—they're provided as starting points. Copy what you need to your project and customize to match your site's design.
|