Rosettes generates semantic HTML with CSS classes for styling. Choose between readable semantic classes or Pygments-compatible classes for drop-in theme support.
Two Class Styles
| Style | Classes | Use Case |
|---|---|---|
| Semantic | .syntax-keyword,.syntax-function |
Readable, self-documenting |
| Pygments | .k,.nf |
Drop-in Pygments theme compatibility |
# Semantic (default)
html = highlight(code, "python")
# <span class="syntax-keyword">def</span>
# Pygments-compatible
html = highlight(code, "python", css_class_style="pygments")
# <span class="k">def</span>
Quick Start
Add this CSS to style semantic classes:
/* Dark theme basics */
.rosettes {
background: #282a36;
padding: 1em;
border-radius: 4px;
overflow-x: auto;
}
.rosettes pre {
margin: 0;
font-family: 'Fira Code', monospace;
}
.syntax-keyword { color: #ff79c6; }
.syntax-function { color: #50fa7b; }
.syntax-string { color: #f1fa8c; }
.syntax-comment { color: #6272a4; }
.syntax-number { color: #bd93f9; }