Code Editor and Syntax Highlighter

Version: 1.0Published: 24th December, 2019by Morgan


ExtendedHTML is a series of CSS and JavaScript libraries focused on implementing new HTML elements.

The 'Code Editor and Syntax Highlighter' module introduces 3 new elements:
  1. The code editor, a multiline plain-text input with indentation features
  2. The syntax highlighter, which displays text in different colours based on their lexical classification
  3. The code highlighter, a hybrid of the two.

Table of contents:

  1. Demo
  2. Using the library
  3. Code editor
  4. Syntax highlighter and theme
  5. Code highlighter

1. Demo

Here is a code highlighter configured for JavaScript and HTML.


These themes are avalible for download below.

2. Using the library


The full library is contained within a single JavaScript file. To use it in your document, define a <script> element and refer to its URL in the "src" attribute.
  e.g. <script src="exampleDirectory/code-highlighter-v1.js"></script>

The library will automatically initalise once the document content is loaded.

Using elements

Custom elements can be defined directly in HTML markup by their tag names, or created through JavaScript constructors such as "document.createElement". Their default tag names are <code-editor>, <syntax-highlighter>, and <code-highlighter> respectively.

Customising tag names

Tag names can be customised through the attribute "data-tagname" of the parent <script> element, although they cannot be changed after initialisation.
  e.g. <script src="code-highlighter-v1.js" data-tagname="new-tagname"></script>

Custom tag names MUST conform to the rules laid out by the Custom Elements API .That is, they should contain at least 1 dash character.("-"), and no uppercase letters.

Note: Casing is ignored in HTML markup and the "document.createElement" constructor.

Other notes

The variable eHTML will be declared globally.

3. Code editor


Code editors are a form of multiline plain-text input. A number indentation features make them ideal for writing source code:

Value Property

Like a textarea, contents of a code editor element can be changed or retrieved using the "value" property.
  e.g. document.querySelector("code-editor").value = "example text";

Text content defined in the HTML markup is used as the element's initial value.
<code-editor> The element will be preloaded with this text. </code-editor>


While code editors respond to CSS, setting their position to static will produce unexpected behaviour.

4. Syntax Highlighter


Syntax highlighters display text in different CSS-styles based on their lexical category.
The lexical classification and styles are defined in a self-contained script known as a 'theme'.

Value Property

Like the code editor, contents of a syntax highlighter element can be changed or retrieved using the "value" property.
  e.g. document.querySelector("syntax-highlighter").value = "example text";

Text content defined in the HTML markup is used as the element's initial value.
<syntax-highlighter> The element will be preloaded with this text. </syntax-highlighter>

Assigning a theme

A theme is typically contained within a single .js file. To load it in your document, define a <script> element and point to the file using the "src" attribute. The theme can then be assigned to a syntax highlighter using a CSS selector in the "data-theme" attribute. For example:
<script id="themeElement" src="exampleTheme.js"></script> <syntax-highlighter data-theme="#themeElement"></syntax-highlighter>

A syntax highligher's theme data can be retrieved or modified using the "themeData" property.
  e.g. document.querySelector("code-editor").themeData = newThemeData

Constructing a theme

Theme data should contain a determinstic finite automaton (DFA) with a list of states. States should contain possible transitions written as:
  1. Viable input (as a regular expression)
  2. CSS text used to style the consumed input
  3. The next state (as a string)

For example:
{ DFA: { "__START__": [ [/regex1/g, cssText1, "nextState"], [/regex2/g, cssText2, "nextState"] ], "nextState":[ [/regex3/g, cssText3, "nextState"] ] } } // note: "__START__" is the start state.

If no viable input is found, one character is consumed and no CSS is applied.

Theme data should be stored in the parent script's "themeData" property. The parent script can be returned using document.currentScript.
  e.g. documen.currentScript.themeData = themeData

Optionally, the "hostStyles" parameter can be used to change DOM-Style properties of the syntax highlighter, for example:
{ // "DFA" omitted for brevity hostStyles: { backgroundColor: "#333", fontFamily: "Comic Sans MS", cursive, sans-serif } }


While syntax highlighters respond to CSS, setting their position to static will produce unexpected behaviour.

5. Code highlighter


Code highlighters combine the functionality of the code editor and syntax highlighter.

Properties and attributes

All properties and attributes of code editors and syntax highlighters are applicable to code highlighters.



All downloadable files can be used for commerical or non-commerical purposes. Do not resell. Attribution is appreciated but not due.

Library Files

Download Description
Code Editor code-editor-v1.js Code editor only.
Syntax Highlighter syntax-highlighter-v1.js Syntax highlighter only.
Code highlighter code-highlighter-v1.js Code highlighter only. Code Editor and Syntax Highlighter are dependencies

Themes Files

JavaScript Dark Theme javascript-dark-v1.js
JavaScript Light Theme javascript-light-v1.js
HTML Dark Theme html-dark-v1.js
HTML Light Theme html-light-v1.js
All possible and potential rights reserved. Should you have any concerns, feel free to contact me at Heledron@gmail.com.