|
|
|
highlight v3.39
|
|
|
|
|
|
|
|
CSS Themes Reference
|
|
|
|
====================
|
|
|
|
|
|
|
|
Useful references for manually creating CSS/SCSS themes for Highlight.
|
|
|
|
|
|
|
|
------------------------------------------------------------------------
|
|
|
|
|
|
|
|
**Table of Contents**
|
|
|
|
|
|
|
|
<!-- #toc -->
|
|
|
|
- [Introduction](#introduction)
|
|
|
|
- [Notes on Highlight HTML Output](#notes-on-highlight-html-output)
|
|
|
|
- [Table of Language Elements’ CSS Classes](#table-of-language-elements-css-classes)
|
|
|
|
|
|
|
|
<!-- /toc -->
|
|
|
|
|
|
|
|
------------------------------------------------------------------------
|
|
|
|
|
|
|
|
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 [Sass](http://sass-lang.com/), [Less](http://lesscss.org/), [Stylus](http://stylus-lang.com/), 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
|
|
|
|
------------------------------
|
|
|
|
|
|
|
|
Highlights 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.
|
|
|
|
|
|
|
|
Example source:
|
|
|
|
|
|
|
|
``` python
|
|
|
|
# A very simple Python program
|
|
|
|
print("Hello World!")
|
|
|
|
```
|
|
|
|
|
|
|
|
Example HTML output:
|
|
|
|
|
|
|
|
``` html
|
|
|
|
<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">"Hello World!"</span><span class="hl opt">)</span>
|
|
|
|
</pre>
|
|
|
|
```
|
|
|
|
|
|
|
|
Line numbers too are handled via a span tag with `ln` class (`<span class="hl lin">`):
|
|
|
|
|
|
|
|
``` html
|
|
|
|
<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">"Hello World!"</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`. |