Syntax highlighting
Nue uses automatically highlights syntax blocks with Glow. It's a classless and fully semantic library that is specifically designed to work well with the global design system.
Styling syntax blocks
HTML markup
Syntax blocks consist of standard HTML tags only and there are no class names. For example:
<pre>
<code language="typescript">
<sup>// a comment
<em>"A string value"</em>
...
</code>
</pre>
Built-in stylesheet
Whenever you add a syntax blog or a code tag on your page, Nue automatically includes a stylesheet for syntax highlighting. It is a highly configurable system based on CSS variables. For example:
/* setting Glow variables */
pre {
--glow-base-color: #eee;
--glow-primary-color: #823;
--glow-padding: 2em;
}
If you want full control of your styling, you can disable the build-in stylesheet in site.yaml
syntax_highlight: false
CSS variables and HTML elements
Here's a list of all CSS variables and the associative HTML elements on a syntax block:
CSS variable | Default value | HTML tag | Description |
---|---|---|---|
accent-color | #419fff | strong | special emphasis |
base-color | #555 | foreground color | |
char-color | #64748b | i | brackets, commas... |
comment-color | #4e5d61 | sup | comments |
counter-color | #475569 | line numbers | |
del-color | 250, 110, 130 | del | deleted lines |
error-color | #ff0 | u | erroneous words |
ins-color | 50, 210, 190 | ins | inserted lines |
line-color | 50, 180, 250 | dfn | highlighted lines |
line-opacity | 0.15 | highlighted line opacity | |
padding | 1em | container padding | |
primary-color | #7dd3fc | b | primary accent color |
secondary-color | #f472b6 | em | secondary accent color |
selected-color | #2dd4bf26 | mark | marked code |
special-color | #fff | label | special words to stand out |
Notes
CSS variables with no associated HTML element are attached to a root
pre
-element.When line numbers are enabled, each line is wrapped inside a
span
element, and the--glow-line-number
variable is attached to thespan:before
pseudo-element.Highlighted rows are colored with a comma-comma-separated list of RGB values so that they can be manipulated with CSS color functions. These colors represent the bright border color on the left edge of the highlighted line, and the line background color is calculated with the RGB values and the
--glow-line-opacity
variable. Setting a value such asrgb(1, 2, 3)
won't work.
Language-specific styling
Use the language
attribute for language-specific CSS tweaks:
[language="html"] {
--glow-accent-color: green;
}
Bolding, italics, and other formatting
By default, Glow uses bolding only together with --glow-special-color
. Other than that all elements have no formatting, just color assignments. You can, of course, make any softs of CSS tweaks to fine-tune syntax blocks. For example:
/* bold all secondary syntax elements */
pre {
em { font-weight: bold }
}