Elegant Syntax Highlighter In JavaScript – EnlighterJS

Preview:

Description:

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
</pre>

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

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,

  // & 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
  toolbarTop: '{BTN_RAW}{BTN_COPY}{BTN_WINDOW}{BTN_WEBSITE}',

  // 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"
     data-enlighter-theme="atomic">
     Code Snippets Here
</pre>

Changelog:

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

06/18/2019

• v3.0.0