Statac

Code colours

Colour the code in your pages, with a theme to copy or colours of your own.

Statac can mark each piece of code in your pages with a class for its kind, such as hl-keyword, when it builds the site. A stylesheet of the site’s own gives each class its colour. Five themes are below, ready to copy.

Turn it on

In statac.yaml:

code_colours: true

Statac then builds a code block with each piece in a span with its class:

<pre class="code"><code class="language-rust"><span class="hl-keyword">fn</span> <span class="hl-function">main</span><span class="hl-punctuation">()</span> <span class="hl-punctuation">{}</span></code></pre>

Without it, Statac builds a code block with no spans and only its language’s class, which is what a JavaScript highlighter such as Prism or highlight.js looks for:

<pre class="code"><code class="language-rust">fn main() {}</code></pre>

The same goes for the highlight filter and a file’s code in a template.

The classes

Each block is a <pre class="code">. A block with a caption is a <pre> inside a <figure class="code">, with the caption in its <figcaption>. Inside, each piece of code carries one of these classes. The names don’t change from one release to the next, so a stylesheet written for them keeps working.

Class What it marks Read from
hl-comment Comments comment
hl-keyword Keywords, such as fn and return, and words such as self keyword, storage, variable.language
hl-string Strings, and inline code in Markdown string, markup.inline.raw
hl-number Numbers constant.numeric
hl-constant Constants, such as true and red constant, support.constant
hl-function Function names entity.name.function, support.function
hl-type Types, classes and modules entity.name.type, support.type, storage.type
hl-variable Variables variable
hl-property Properties and keys, such as CSS’s color and YAML’s keys variable.other.property, support.type.property-name
hl-tag HTML and XML tags, and CSS’s element selectors entity.name.tag
hl-attribute Attributes and annotations entity.other.attribute-name
hl-operator Operators, such as = and + keyword.operator
hl-punctuation Brackets, commas and the rest punctuation
hl-heading Headings in Markdown, and a diff’s headers markup.heading
hl-emphasis Emphasis in Markdown markup.italic
hl-strong Strong emphasis in Markdown markup.bold
hl-link Links in Markdown markup.underline.link
hl-inserted Lines added in a diff markup.inserted
hl-deleted Lines removed in a diff markup.deleted

“Read from” is the TextMate scope a language’s grammar gives the piece: the main one for each class, not every one.

Themes

Each theme has a light and a dark look, and follows the reader’s device. A data-theme of light or dark on any element around the code chooses one look instead.

To use one, copy it into a stylesheet in assets/, such as assets/code.css, and link that in your templates:

{{ css("code.css") }}

To change one colour, set its property on .code or anything around it: --code-comment for comments, and so on for each class, with --code-text and --code-background for the rest.

Ocean

From base16-vscode’s Ocean Light and Ocean Dark, MIT licence.

ocean.css
/* Code colours for Statac's code_colours: true: Ocean, light and dark.
   From base16-vscode's Ocean Light and Ocean Dark, Copyright (c) 2016
   Andrés Del Carpio, under the MIT License: github.com/jryans/base16-vscode.
   To change one colour, set its property, --code-comment for a comment's,
   on .code or anything around it. */

[data-theme="light"] { --statac-code-scheme: light; }
[data-theme="dark"] { --statac-code-scheme: dark; }

.code {
  color-scheme: var(--statac-code-scheme, light dark);
  color: var(--code-text, light-dark(#4f5b66, #c0c5ce));
  background-color: var(--code-background, light-dark(#eff1f5, #2b303b));
}

.hl-comment { color: var(--code-comment, light-dark(#6a6d76, #8e98a0)); }
.hl-keyword { color: var(--code-keyword, light-dark(#80657b, #b48ead)); }
.hl-string { color: var(--code-string, light-dark(#627254, #a3be8c)); }
.hl-number { color: var(--code-number, light-dark(#946050, #d08770)); }
.hl-constant { color: var(--code-constant, light-dark(#946050, #d08770)); }
.hl-function { color: var(--code-function, light-dark(#626e7a, #8fa1b3)); }
.hl-type { color: var(--code-type, light-dark(#946050, #ebcb8b)); }
.hl-variable { color: var(--code-variable, light-dark(#a7555d, #cd838a)); }
.hl-property { color: var(--code-property, light-dark(#a7555d, #cd838a)); }
.hl-tag { color: var(--code-tag, light-dark(#a7555d, #cd838a)); }
.hl-attribute { color: var(--code-attribute, light-dark(#946050, #d08770)); }
.hl-operator { color: var(--code-operator, light-dark(#4f5b66, #c0c5ce)); }
.hl-punctuation { color: var(--code-punctuation, light-dark(#4f5b66, #c0c5ce)); }
.hl-heading { color: var(--code-heading, light-dark(#626e7a, #8fa1b3)); }
.hl-emphasis { color: var(--code-emphasis, light-dark(#80657b, #b48ead)); font-style: italic; }
.hl-strong { color: var(--code-strong, light-dark(#946050, #ebcb8b)); font-weight: bold; }
.hl-link { color: var(--code-link, light-dark(#946050, #d08770)); }
.hl-inserted { color: var(--code-inserted, light-dark(#627254, #a3be8c)); }
.hl-deleted { color: var(--code-deleted, light-dark(#a7555d, #cd838a)); }

Gruvbox

From Gruvbox Theme’s Light Medium and Dark Medium, MIT licence.

gruvbox.css
/* Code colours for Statac's code_colours: true: Gruvbox, light and dark.
   From Gruvbox Theme's Light Medium and Dark Medium, Copyright © 2017 JD,
   under the MIT License: github.com/jdinhify/vscode-theme-gruvbox.
   To change one colour, set its property, --code-comment for a comment's,
   on .code or anything around it. */

[data-theme="light"] { --statac-code-scheme: light; }
[data-theme="dark"] { --statac-code-scheme: dark; }

.code {
  color-scheme: var(--statac-code-scheme, light dark);
  color: var(--code-text, light-dark(#3c3836, #ebdbb2));
  background-color: var(--code-background, light-dark(#fbf1c7, #282828));
}

.hl-comment { color: var(--code-comment, light-dark(#786c60, #9a8c7f)); font-style: italic; }
.hl-keyword { color: var(--code-keyword, light-dark(#9d0006, #fb5340)); }
.hl-string { color: var(--code-string, light-dark(#75700e, #b8bb26)); }
.hl-number { color: var(--code-number, light-dark(#8f3f71, #d3869b)); }
.hl-constant { color: var(--code-constant, light-dark(#8f3f71, #d3869b)); }
.hl-function { color: var(--code-function, light-dark(#976211, #fabd2f)); }
.hl-type { color: var(--code-type, light-dark(#976211, #fabd2f)); }
.hl-variable { color: var(--code-variable, light-dark(#076678, #83a598)); }
.hl-property { color: var(--code-property, light-dark(#076678, #83a598)); }
.hl-tag { color: var(--code-tag, light-dark(#417957, #8ec07c)); }
.hl-attribute { color: var(--code-attribute, light-dark(#976211, #fabd2f)); }
.hl-operator { color: var(--code-operator, light-dark(#417957, #8ec07c)); }
.hl-punctuation { color: var(--code-punctuation, light-dark(#786b60, #a89984)); }
.hl-heading { color: var(--code-heading, light-dark(#9d0006, #fb5340)); font-weight: bold; }
.hl-emphasis { color: var(--code-emphasis, light-dark(#3c3836, #ebdbb2)); font-style: italic; }
.hl-strong { color: var(--code-strong, light-dark(#af3a03, #fe8019)); font-weight: bold; }
.hl-link { color: var(--code-link, light-dark(#8f3f71, #d3869b)); text-decoration: underline; }
.hl-inserted { color: var(--code-inserted, light-dark(#75700e, #b8bb26)); }
.hl-deleted { color: var(--code-deleted, light-dark(#b44f0c, #db722d)); }

Solarized

From Visual Studio Code’s Solarized Light and Solarized Dark, MIT licence.

solarized.css
/* Code colours for Statac's code_colours: true: Solarized, light and dark.
   From Visual Studio Code's Solarized Light and Solarized Dark, Copyright (c)
   2015 - present Microsoft Corporation, under the MIT License:
   github.com/microsoft/vscode. To change one colour, set its property,
   --code-comment for a comment's, on .code or anything around it. */

[data-theme="light"] { --statac-code-scheme: light; }
[data-theme="dark"] { --statac-code-scheme: dark; }

.code {
  color-scheme: var(--statac-code-scheme, light dark);
  color: var(--code-text, light-dark(#5f747c, #839496));
  background-color: var(--code-background, light-dark(#fdf6e3, #002b36));
}

.hl-comment { color: var(--code-comment, light-dark(#697373, #809096)); font-style: italic; }
.hl-keyword { color: var(--code-keyword, light-dark(#687800, #859900)); }
.hl-string { color: var(--code-string, light-dark(#217e77, #2aa198)); }
.hl-number { color: var(--code-number, light-dark(#c9347c, #dd649e)); }
.hl-constant { color: var(--code-constant, light-dark(#8e6b00, #b58900)); }
.hl-function { color: var(--code-function, light-dark(#2075b1, #3794d5)); }
.hl-type { color: var(--code-type, light-dark(#c34816, #d67249)); }
.hl-variable { color: var(--code-variable, light-dark(#2075b1, #3794d5)); }
.hl-property { color: var(--code-property, light-dark(#2075b1, #3794d5)); }
.hl-tag { color: var(--code-tag, light-dark(#2075b1, #3794d5)); }
.hl-attribute { color: var(--code-attribute, light-dark(#697373, #93a1a1)); }
.hl-operator { color: var(--code-operator, light-dark(#687800, #859900)); }
.hl-punctuation { color: var(--code-punctuation, light-dark(#5f747c, #839496)); }
.hl-heading { color: var(--code-heading, light-dark(#2075b1, #3794d5)); font-weight: bold; }
.hl-emphasis { color: var(--code-emphasis, light-dark(#c9347c, #dd649e)); font-style: italic; }
.hl-strong { color: var(--code-strong, light-dark(#c9347c, #dd649e)); font-weight: bold; }
.hl-link { color: var(--code-link, light-dark(#5f747c, #839496)); }
.hl-inserted { color: var(--code-inserted, light-dark(#687800, #859900)); }
.hl-deleted { color: var(--code-deleted, light-dark(#d4302e, #e46563)); }

Catppuccin

From Catppuccin for VSCode’s Latte and Mocha, MIT licence.

catppuccin.css
/* Code colours for Statac's code_colours: true: Catppuccin, light and dark.
   From Catppuccin for VSCode's Latte and Mocha, Copyright (c) 2021
   Catppuccin, under the MIT License: github.com/catppuccin/vscode.
   To change one colour, set its property, --code-comment for a comment's,
   on .code or anything around it. */

[data-theme="light"] { --statac-code-scheme: light; }
[data-theme="dark"] { --statac-code-scheme: dark; }

.code {
  color-scheme: var(--statac-code-scheme, light dark);
  color: var(--code-text, light-dark(#4c4f69, #cdd6f4));
  background-color: var(--code-background, light-dark(#eff1f5, #1e1e2e));
}

.hl-comment { color: var(--code-comment, light-dark(#6a6c7d, #9399b2)); font-style: italic; }
.hl-keyword { color: var(--code-keyword, light-dark(#8839ef, #cba6f7)); }
.hl-string { color: var(--code-string, light-dark(#327d22, #a6e3a1)); }
.hl-number { color: var(--code-number, light-dark(#bc4a09, #fab387)); }
.hl-constant { color: var(--code-constant, light-dark(#d20f39, #f38ba8)); }
.hl-function { color: var(--code-function, light-dark(#1e63ee, #89b4fa)); font-style: italic; }
.hl-type { color: var(--code-type, light-dark(#986114, #f9e2af)); font-style: italic; }
.hl-variable { color: var(--code-variable, light-dark(#4c4f69, #cdd6f4)); }
.hl-property { color: var(--code-property, light-dark(#4c4f69, #cdd6f4)); }
.hl-tag { color: var(--code-tag, light-dark(#1e63ee, #89b4fa)); }
.hl-attribute { color: var(--code-attribute, light-dark(#986114, #f9e2af)); }
.hl-operator { color: var(--code-operator, light-dark(#147a7f, #94e2d5)); }
.hl-punctuation { color: var(--code-punctuation, light-dark(#6a6c7d, #9399b2)); }
.hl-heading { color: var(--code-heading, light-dark(#d20f39, #f38ba8)); }
.hl-emphasis { color: var(--code-emphasis, light-dark(#d20f39, #f38ba8)); font-style: italic; }
.hl-strong { color: var(--code-strong, light-dark(#d20f39, #f38ba8)); font-weight: bold; }
.hl-link { color: var(--code-link, light-dark(#1e63ee, #89b4fa)); }
.hl-inserted { color: var(--code-inserted, light-dark(#327d22, #a6e3a1)); }
.hl-deleted { color: var(--code-deleted, light-dark(#d20f39, #f38ba8)); }

One Half

From One Half’s Light and Dark, MIT licence.

one-half.css
/* Code colours for Statac's code_colours: true: One Half, light and dark.
   From One Half's Light and Dark, Copyright (c) 2019 Son A. Pham, under
   the MIT License: github.com/sonph/onehalf. To change one colour, set its
   property, --code-comment for a comment's, on .code or anything around it. */

[data-theme="light"] { --statac-code-scheme: light; }
[data-theme="dark"] { --statac-code-scheme: dark; }

.code {
  color-scheme: var(--statac-code-scheme, light dark);
  color: var(--code-text, light-dark(#383a42, #dcdfe4));
  background-color: var(--code-background, light-dark(#fafafa, #282c34));
}

.hl-comment { color: var(--code-comment, light-dark(#727377, #8e939c)); }
.hl-keyword { color: var(--code-keyword, light-dark(#a626a4, #c678dd)); }
.hl-string { color: var(--code-string, light-dark(#408140, #98c379)); }
.hl-number { color: var(--code-number, light-dark(#9b6a01, #e5c07b)); }
.hl-constant { color: var(--code-constant, light-dark(#9b6a01, #e5c07b)); }
.hl-function { color: var(--code-function, light-dark(#017baf, #61afef)); }
.hl-type { color: var(--code-type, light-dark(#9b6a01, #e5c07b)); }
.hl-variable { color: var(--code-variable, light-dark(#c54a3f, #e07079)); }
.hl-property { color: var(--code-property, light-dark(#c54a3f, #e07079)); }
.hl-tag { color: var(--code-tag, light-dark(#c54a3f, #e07079)); }
.hl-attribute { color: var(--code-attribute, light-dark(#9b6a01, #e5c07b)); }
.hl-operator { color: var(--code-operator, light-dark(#a626a4, #c678dd)); }
.hl-punctuation { color: var(--code-punctuation, light-dark(#383a42, #dcdfe4)); }
.hl-heading { color: var(--code-heading, light-dark(#017baf, #61afef)); }
.hl-emphasis { color: var(--code-emphasis, light-dark(#a626a4, #c678dd)); }
.hl-strong { color: var(--code-strong, light-dark(#a626a4, #c678dd)); }
.hl-link { color: var(--code-link, light-dark(#408140, #98c379)); }
.hl-inserted { color: var(--code-inserted, light-dark(#607b4d, #98c379)); }
.hl-deleted { color: var(--code-deleted, light-dark(#b4575e, #e07079)); }

How the themes were made

Each class takes the colour the original theme gives its scope. If that colour stands at less than 4.5 to 1 against the theme’s background, the contrast WCAG asks of text, the colour here is the nearest one towards black or white that reaches it.

Something unclear or wrong? Open an issue.