|
|
highlight v3.39
|
|
|
highlight v3.40
|
|
|
|
|
|
CSS Themes Reference
|
|
|
====================
|
|
|
# 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)
|
|
|
|
|
|
- [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
|
|
|
============
|
|
|
# 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.
|
|
|
|
... | ... | @@ -27,12 +26,11 @@ Highlight theme files are Lua files that can handle formatting for various outpu |
|
|
|
|
|
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
|
|
|
------------------------------
|
|
|
## 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.
|
|
|
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!
|
|
|
> **NOTE**: `<span>` tags are never nested in Highlight output\!
|
|
|
|
|
|
Example source:
|
|
|
|
... | ... | @@ -57,33 +55,32 @@ Line numbers too are handled via a span tag with `ln` class (`<span class="hl li |
|
|
</pre>
|
|
|
```
|
|
|
|
|
|
Table of Language Elements’ CSS Classes
|
|
|
---------------------------------------
|
|
|
## 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`) |
|
|
|
| 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`. |