EnlighterJS/EnlighterJS: an open source syntax highlighter written in pure javascript

Quickstart | Documentation | Languages | Themes | Website

EnlighterJS, an open source syntax highlighter written in pure javascript

Using it can be as simple as adding a single script and style to your website, choosing the elements you wish to highlight, and EnlighterJS takes care of the rest.

Documentation
Website
Developer Guide
Examples
EnlighterJS for WordPress - The official EnlighterJS plugin for WordPress | Repository
EnlighterJS for TinyMCE Editor - The official EnlighterJS plugin for TinyMCE Visual Editor | Repository
EnlighterJS for Gutenberg Editor - The official EnlighterJS plugin for WordPress Gutenberg Editor| Repository

Features

KEY FEATURES

Designed to work in all modern browsers (not server-side)
Encapsulated, standalone library - zero dependencies (no MooTools, no jQuery!)
40 supported languages/formats
12 high quality themes
Inline Syntax highlighting
Codegroups to displays multiple code-blocks within a tab-pane
Point out special lines of code
Ultra small footprint: 45KB JS (all languages) + 10KB CSS (single theme; all themes 60KB)
Highlight all codeblocks on your page with a single command

TECHNICAL FEATURES

Ultrafast Tokenizer Engine based on priorized regular expressions
Second-Stage-Tokenizer for optimized performance
Full customizable themes written in less
Themes available as single css files to reduce footprint
Views based on JSX
Minimal, embedded DOM library
gulp based build system
ES6 code transpiled via babel and build with rollup.js

Languages

Assembly (assembly, asm)
AVR Assembly (avrassembly, avrasm)
C/C++ (c,cpp, c++)
C# (csharp)
CSS (css)
Cython (cython)
CordPro (cordpro)
diff (diff)
Dockerfile (docker, dockerfile)
Generic (generic, standard) - default highlighting scheme
Groovy (groovy)
Go (go, golang)
HTML (html)
Ini (ini, conf)
Java (java)
Javascript (js, javascript, jquery, mootools, ext.js)
JSON (json)
Kotlin (kotlin)
LESS (less)
LUA (lua)
Markdown (gfm, md, markdown)
Matlab/Octave (octave, matlab)
NSIS (nsis)
PHP (php)
Powerhsell (powershell)
Prolog (prolog)
Python (py, python)
RAW (raw) - raw code without highlighting with EnlighterJS container styles!
Ruby (ruby)
Rust (rust)
SCSS (scss, sass)
Shellscript (shell, bash)
SQL (sql)
Squirrel (squirrel)
Swift (swift)
Typescript (typescript)
VHDL (vhdl)
VisualBasic (visualbasic, vb)
XML (xml)
YAML (yaml)

Themes

Enlighter (enlighter, standard) - Enlighter`s default Theme
Classic (classic) - SyntaxHighlighter inspired
Bootstrap (bootstrap4) - Bootstrap 4 inpired themes, high contrast
Beyond (beyond) - BeyondTechnology Theme
Godzilla (godzilla) - A MDN inspired Theme
Eclipse (eclipse) - Eclipse inspired
MooTwo (mootwo) - Inspired by the MooTools Website
Droide (droide) - Modern, minimalistic
Minimal (minimal) - Bright, High contrast
Atomic (atomic) - Dark, Colorful
Dracula (dracula) - Dark, using official draculatheme colorscheme
Rowhammer (rowhammer) - Light, Transparent, divided rows

Quickstart

Download latest EnlighterJS release
Copy the files from the dist/ directory to your public html location
Include the CSS+JS files
Tag the codeblocks on your page (e.g. pre tags with data-enlighter-language attribute)
Initialize highlighting

Minimal Example

This is a minimalistic example how to highlight sourcecode with EnlighterJS. The working example (valid js+css paths) is available within the example directory.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>EnlighterJS Test</title>

    <!-- EnlighterJS Resources !-->
    <link rel="stylesheet" href="enlighterjs.min.css" />
</head>
<body>

    <main>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore 
            et dolore <code>window.addEvent('domready', async (a,b) => {});</code> magna aliquyam erat.
        </p>

        <!-- Code to hghlight !-->
        <pre data-enlighter-language="less">
// buttons used in codegroups + toolbar
.enlighter-btn{
    display: inline-block;
    margin: 0px 5px 0px 5px;
    padding: 3px 5px 3px 5px;
    border: solid 1px #333333;
    background-color: #f0f0f0;
    cursor: pointer;
}

// buttons
.enlighter-btn-raw{
    background-image: data-uri('icons/enlighter_code.svg');
}

.enlighter-btn-window{
    background-image: data-uri('icons/enlighter_rawcode.svg');
}

.enlighter-btn-website{
    background-image: data-uri('icons/enlighter_icon_white.svg');
}
        </pre>

    </main>

    <script type="text/javascript" src="enlighterjs.min.js"></script>
    <script type="text/javascript">
        // INIT CODE - simple page-wide initialization based on css selectors
        // - highlight all pre + code tags (CSS3 selectors)
        // - use javascript as default language
        // - use theme "enlighter" as default theme
        // - replace tabs with 2 spaces
        EnlighterJS.init('pre', 'code', {
                language : 'javascript',
                theme: 'enlighter',
                indent : 2
        });
    </script>
</body>
</html>

Contribution

EnlighterJS is OpenSource and managed on GitHub - if you like, you're welcome to contribute! To simplify the release and quality control process, please follow these remarks:

One Enhancement ==> One Commit (don't merge a bunch of changes in a single commit!)
Only commit changes to the src/ or examples/ directory. Otherwise your request will be rejected
Discuss larger project changes with the Maintainer before implementing
Use GitHub for question, bugreports and discussions

License

EnlighterJS is OpenSource and licensed under the Terms of Mozilla Public License 2.0. You're welcome to contribute

Related