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.6.0 (01/16/2023)

• Added: css tooltips to the toolbar
• Added: copy-to-clipboard success/error message via tooltip
• Added: language identifier as css class to the outer wrapper enlighter-l-<resolvedLanguage>
• Added: htaccess language alias to “Apache httpd”
• Changed: DOM structure has changed: each raw+highlighted code elements are wrapper into enlighter-code container
• Changed: DOM structure has changed: removed enlighter-codegroup-wrapper
• Changed: toolbar position is now persistent and not affected by horizontal/vertical scrolling
• Bugfix: bash pound style comment regex also matched variable substituions and special cases
• Bugfix: bash single quoted strings not highlighted
• Bugfix: language alias js was processed as typescript due to inheritance issue (missing override)

v3.5.1 (10/18/2022)

• added css tooltips + copy message; DOM structure changes

v3.5.0 (05/07/2022)

• Added: basic support for windows batch / bat file syntax
• Added: dart language support
• Added: dedicated MariaDB/MySQL language support mariadb
• Added: dedicated Oracle Database language support oracledb (no special rules yet)
• Added: dedicated MSSQL language support mssql (no special rules yet)
• Added: constraints to sql
• Changed: splitted sql language into several types/dialects for further extension
• Changed: removed pound style comments from generic sql support
• Changed: removed keywords bigint and unsigned from generic sql support
• Changed: droide theme color #009999 to #007f7f for higher contrast (WCAG)
• Changed: in case of a tokenizer error, the tokenizer will silently fail (output to console) instead of throwing an error – code will still be displayed but related tokens are missing
• Bugfix: yaml integer numbers not highlighted
• Bugfix: php variable and function names followed by single/double quotes were interpreted as name
• Bugfix: php method names which equals a keyword were highlighted as keyword
• Bugfix: php method calls on variables were interpreted as variable name
• Bugfix: latex command on first line not recognized
• Bugfix: javascript regular expressions are match over multiple lines
• Bugfix: tokenizer loop limit was calculated in total instead of per-rule
• 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
• Added: keyword x16 for css element selectors
• Added: contextual keywords to csharp
• Added: kotlin string template support
• Added: r language support (covered by generic ruleset)
• Added: MikroTik RouterOS language support (ros/mikrotik/switchos/routeros/mt)
• Added: pound style comment support to php
• Changed: css selector fragment highlighting is limited to the selector itself
• Changed: enhanced css unit parsing
• Changed: java, scala, cpp annotation token changed to k11
• Changed: added token k11 to themes
• Changed: moved generic highlighting rules to lang/rulesets/generic
• Changed: ampersandCleanup is performed after html escape sequences to eliminate issues related to double unquoting
• Changed: toggle raw code label to “Plain text”
• Changed: allowed utf8 characters in php variable and function names (side effect of the php parser)
• Bugfix: vhdl single bit highlighting collided with attribute syntax
• Bugfix: css classnames/ids with hyphens were not recognized
• Bugfix: XML mixins of single/double quotes in attributes failed
• Bugfix: dot char within XML attribute names not recognized
• Bugfix: kotlin raw string where not correctly parsed (wrong rule priority)
• Bugfix: highlighting color of classic theme not applied due to invalid selectors

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