Home

Awesome

Build Status

Quickstart | Documentation | Languages | Themes | Website

EnlighterJS3

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.

Appearance

Related

Features

KEY FEATURES

TECHNICAL FEATURES

Languages

Themes

Quickstart

  1. Download latest EnlighterJS release
  2. Copy the files from the dist/ directory to your public html location
  3. Include the CSS+JS files
  4. Tag the codeblocks on your page (e.g. pre tags with data-enlighter-language attribute)
  5. 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:

  1. One Enhancement ==> One Commit (don't merge a bunch of changes in a single commit!)
  2. Only commit changes to the src/ or examples/ directory. Otherwise your request will be rejected
  3. Discuss larger project changes with the Maintainer before implementing
  4. 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