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.
- Website
- Documentation
- 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
- 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
- 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
- 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)
- 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
- 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.
pretags withdata-enlighter-languageattribute) - Initialize highlighting
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>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/orexamples/directory. Otherwise your request will be rejected - Discuss larger project changes with the Maintainer before implementing
- Use GitHub for question, bugreports and discussions
EnlighterJS is OpenSource and licensed under the Terms of Mozilla Public License 2.0. You're welcome to contribute