Elegant Syntax Highlighter In JavaScript – EnlighterJS

Category: Javascript , Recommended , Text | January 29, 2019
Author: EnlighterJS
Views Total: 714
Official Page: Go to website
Last Update: January 29, 2019
License: MIT

Preview:

Elegant Syntax Highlighter In JavaScript – EnlighterJS

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 Stylehseet 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,

  // &amp; to &
  ampersandCleanup: true,

  // enable line hover highlighting
  linehover: true,

  // show linenumbers
  linenumbers: true,

  // no line offset
  lineoffset: 0,

  // no special line highlighting
  highlight: '',

  // default layout
  layout: 'standard',

  // default language
  language: 'generic',

  /*
    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:

01/29/2019

  • v3.0

You Might Be Interested In:


Leave a Reply