Elegant Syntax Highlighter In JavaScript – EnlighterJS

Category: Javascript , Recommended , Text | November 26, 2020
Views Total:522 views
Official Page:Go to website
Last Update:November 26, 2020


Elegant Syntax Highlighter In JavaScript – EnlighterJS


EnlighterJS is a powerful Syntax Highlighter that supports more than 40 languages and comes with 12 elegant themes.

Also provides plugins for TinyMCE and WordPress.

Supported 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)
  • Verilog

More features:

  • Copy to clipborad.
  • RAW mode.
  • Line numbers.
  • Highlight current line on hover.
  • Display code snippets in new window

Basic usage:

Load the EnlighterJS’ JavaScript and Stylesheet in the document.

<link rel="stylesheet" href="enlighterjs.min.css">
<script src="enlighterjs.min.js"></script>

Insert your code snippets into pre or code tag and specify the language using the data-enlighter-language attribute:

<pre data-enlighter-language="javascript">
  Code Snippets Here

<code data-enlighter-language="less">
  Code Snippets Here

Initialize the Syntax Highlighter with default settings.

EnlighterJS.init('pre', 'code');

Available options to customize the Syntax Highlighter.

EnlighterJS.init('pre', 'code',{

  // default code indentation
  indent: 4,

  // &amp; to &
  ampersandCleanup: true,

  // enable line hover highlighting
  linehover: true,

  // show linenumbers
  linenumbers: true,

  // copy css classes from origin element to outer wrapper
  retainCssClasses: false,

  // additional css classes added to outer wrapper
  cssClasses: '',

  // top outer toolbar
  toolbarOuter: '{BTN_TABS}',

  // header toolbar

  // footer toolbar
  toolbarBottom: '{BTN_COLLAPSE}',

  // no line offset
  lineoffset: 0,

  // no special line highlighting
  highlight: '',

  // default layout
  layout: 'standard',

  // or 'scroll
  textOverflow: 'break',

  // enable collapse / vertical scroll
  collapse: false,

  // default language
  language: 'generic',

  // default title
  title: ''

    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
  theme: 'enlighter',

  // show raw code on double click
  rawcodeDbclick: false


You can also pass the options via data-OPTION attributes as follows:

<pre data-enlighter-language="javascript"
     Code Snippets Here


v3.5.0 (11/25/2020)

  • Changed: droide theme color #009999 to #007f7f for higher contrast (WCAG)
  • Bugfix: keywords of generic language requires a word-boundary before+after instead of a non word character
  • Bugfix: allow any non-whitespace chars in sql column name literals
  • Bugfix: added missing string keyword to c# type list
  • Bugfix: pound and double-slash style comments also matched the last character before the comment

v3.4.0 (05/11/2020)

  • Added: keyword k11 for annotations
  • Changed: java, scala, cpp annotation token changed to k11
  • Changed: added token k11 to themes

v3.3.0 (04/22/2020)

  • Added: apachehttpd/htaccess support
  • Added: lighttpd support
  • Added: nginx support
  • Added: purebasic support
  • Added: latex/tex support
  • Changed: theme font sizes + line-height are based on relative em values – only the font size of the outer wrapper is set explicitly
  • Changed: removed “function” highlighting regex from sql
  • Bugfix: [engine] possible overlapping matches of multitype tokens in case submatches are equal

v3.2.0 (04/17/2020)

  • Added: verilog support
  • Added: collapse option to limit the maximal height
  • Added: integer highlighting for sql
  • Added: modular configurable toolbar system using placeholders
  • Added: collapse mode
  • Added: browser based tooltips to the buttons (title attribute)
  • Bugfix: powershell commands can also expressed lowercase (camel-case not required)
  • Bugfix: sql — styles comments ignored due to invalid regex

v3.1.0 (07/21/2019)

  • added options retainCssClasses, cssClasses


  • v3.0.0

You Might Be Interested In:

Leave a Reply