Recommended releases

Download Links

Adds a shortcode integration for using Highlight.js in the WYSIWYG editor.

How To Install

  1. Enable the bundle like any Backdrop module.
  2. Add it to the WYSIWYG Editor by choosing a text format under "admin/config/content/formats".
  3. On your text format settings, check "Enable Insert Code Syntax shortcode" under the shortcode settings and "ShortCodes" under the "enabled filters"
    select list.
  4. Add the "{code}" button to "Avaiable Toolbar".
  5. Add the Highlight.js bundled library from the Highlight.js project bundler to a new /libraries directory in
    this module's root folder, e.g /libraries/highlightjs/.

How To Use In WYSIWYG Editor

When you edit a node using the WYSIWYG text filter, you'll see button with brackets that allows you to enter code syntax.

screen shot 2018-05-18 at 2 38 01 pm

Once the dialog window is open, you can choose the language and insert the code syntax.

screen shot 2018-05-18 at 2 43 26 pm

Then you will see a shortcode [code lang="php"]$foo = "bar";[/code] inserted into the body field with line breaks and indentation preserved.

screen shot 2018-05-18 at 2 43 58 pm

Once saved, the code is rendered with syntax highlighting. You can change the theme by setting a variable, drush vset csh_theme sunburst, and the
themes are located at https://highlightjs.org/static/demo/.

screen shot 2018-05-18 at 2 44 25 pm