search

backdrop-contrib / highlightjs_wysiwyg

Adds a shortcode for using HighlightJS in the WYSIWYG editor.
GNU General Public License v2.0
0 stars 1 forks source link

readme

Highlight JS WYSIWYG

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

Installation

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

Documentation

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

Issues

Bugs and Feature requests should be reported in the Issue Queue: https://github.com/backdrop-contrib/highlightjs_wysiwyg/issues.

Current Maintainers

Credits

License

This project is GPL v2 software. See the LICENSE.txt file in this directory for complete text.