CSS Themes

tajmone edited this page Jun 11, 2018 · 5 revisions
Highlight v3.40

CSS Themes Reference

Useful references for manually creating CSS/SCSS themes for Highlight.


Table of Contents


Introduction

Language definition files define the syntax of language elements. Colour themes define how these language elements should be formatted in the final highlighted document.

Highlight theme files are Lua files that can handle formatting for various output formats, including HTML. While Highlight themes support basic formatting (Colour, Bold, Italic, and Underline), when targetting HTML output you might wish for a finer control over styling, and opt for defining your own custom CSS themes — or use Sass, Less, Stylus, etc.

In order to define the right CSS classes, you’ll find helpful the table below, listing the various language elements and their corresponding HTML/CSS classes in the final output.

Notes on Highlight HTML Output

Highlight’s default behaviour for HTML output is to enclose the code block within a preformatted block with class hl (<pre class="hl">), and then enclose all the various language elements within <span> tags with the hl class along the element’s corresponding class.

NOTE: <span> tags are never nested in Highlight output!

Example source:

# A very simple Python program
print("Hello World!")

Example HTML output:

<pre class="hl"><span class="hl slc"># A very simple Python program</span>
<span class="hl kwa">print</span><span class="hl opt">(</span><span class="hl str">&quot;Hello World!&quot;</span><span class="hl opt">)</span>
</pre>

Line numbers too are handled via a span tag with ln class (<span class="hl lin">):

<pre class="hl"><span class="hl lin">    1 </span><span class="hl slc"># A very simple Python program</span>
<span class="hl lin">    2 </span><span class="hl kwa">print</span><span class="hl opt">(</span><span class="hl str">&quot;Hello World!&quot;</span><span class="hl opt">)</span>
</pre>

Table of Language Elements’ CSS Classes

The CSS counterparts of a theme’s Default and Canvas definitions are the definitions of the <pre> tag with hl class:

Element CSS Description
Default pre.hl { ... } Attributes of unspecified text
Canvas pre.hl { background: ...; } Code block background properties

The rest of the language elements counterparts (including line numbers) concern <span> tags with the following classes:

Element CSS Description
Number .hl .num Numbers
Escape .hl .esc Escape sequences
Interpolation .hl .ipl Interpolation sequences
String .hl .str Strings
PreProcessor .hl .ppc Preprocessor directives
StringPreProc .hl .pps Strings within preprocessor directives
BlockComment .hl .com Block comments
LineComment .hl .slc Single-line comments
LineNum .hl .lin Line numbers
Operator .hl .opt Operators
Keywords>Id=1 .hl .kwa Keywords group 1 (a)
Keywords>Id=2 .hl .kwb Keywords group 2 (b)
Keywords>Id=3 .hl .kwc Keywords group 3 (c)
Keywords>Id=4 .hl .kwd Keywords group 4 (d)

To define CSS Keywords groups above Id=4, just keep incrementing the last letter in the ".kw*" class name — Eg: .kwe, .kwf, .kwg, …, .kwz.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.