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)

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

  // no line offset
  lineoffset: 0,

  // no special line highlighting
  highlight: '',

  // default layout
  layout: 'standard',

  // or 'scroll
  textOverflow: 'break',

  // 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.1.0 (07/21/2019)

• added options retainCssClasses, cssClasses

06/18/2019

• v3.0.0