This module enables the CodeSnippet plugin from CKEditor.com in your WYSIWYG. It includes the highlightjs library and all available styles for it. If you've ever wanted to drop code examples in your Drupal content and have it highlighted in a pretty format, this is for you. This project is available for Drupal 7 as WYSIWYG CodeSnippet. Since that project relies on WYSIWYG module, and this one only requires D8 core, it made sense to rename it.

Installing

Drupal 8 ships with CKEditor 4.5.x, so it depends on the ckeditor module from core.
This module requires the core CKEditor module and also the CodeSnippet plugin from CKEditor.com.

  1. Download the plugin from http://ckeditor.com/addon/codesnippet at least version 4.5.11.
  2. Place the plugin in the root libraries folder (/libraries).
  3. Enable CodeSnippet in the Drupal admin.
  4. Configure your WYSIWYG toolbar to include the button.

Basic Usage

After completing the installation steps above, go to the filter format you want to configure (must be using CKEditor).

Drag CodeSnippet icon into the active toolbar, and the config form will appear below with a syntax highlighting style and supported languages option. By default, all are checked for you. Uncheck ones you won't need, it's optional. This only controls the options in the dialog window of CKEditor when inserting a code snippet.

Note that your filter format must support the use of pre and code tags under allowed tags as well, if using anything other than Full HTML. You also need to configure the HTML filter (if Limit Allowed Tags is enabled) to allow the class attribute like so:

<code class=""> <pre class="">

Also, if you want to highlight HTML code snippets, you need to use the XML option. It works for both.

Additional Language Support

To add new options to the supported languages option in the admin form, you can use a hook_form_FORM_ID_alter hook within your own custom module to add on:

use Drupal\Core\Form\FormStateInterface;

/**
 * Implements hook_form_FORM_ID_alter().
 * Add extra languages for CodeSnippet 
 * @param $form
 * @param FormStateInterface $form_state
 * @param $form_id
 */
function MYMODULE_form_filter_format_edit_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  if (isset($form['editor']['settings']['subform']['plugins']['codesnippet'])) {
    $form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']['cpp'] = 'C++';
    $form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']['d'] = 'D';
    $form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']['rust'] = 'Rust';
    asort($form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']);
  }
}

This would add C++, D and Rust to the list of languages to check off, which will then make them available in the dialog of CKEditor CodeSnippet.

An important thing to note is that the key of the array item needs to match the expected code class for HighlightJS for proper coloring. If you are unsure of the class name, refer to the HighlightJS live demo page and inspect the codeblock of what you want, and check the class on the code HTML element.

Additionally, you will need to add any support for new languages to HighlightJS by customizing its build. You can customize the build at https://highlightjs.org/download/

  1. Select all the languages you want to support with syntax highlighting and download it.
  2. Overwrite /libraries/codesnippet/lib/highlight/highlight.pack.js with this new file.
  3. Clear Drupal caches.

Supporting Multiple Stylesheets

While this module allows each filter format to configure a stylesheet for highlighting, the HLJS plugin does not yet support this feature. See this issue for more details, including a possible workaround to implementing it in your own style:

https://github.com/isagalaev/highlight.js/issues/862

If you are using multiple filter formats on a page, note that the highest weighted filter formats settings will be added to the page last and therefore that style will override any of the other HLJS styles selected in other formats.

For now, it is best to only configure one format for highlighting, or, use the same style library for all formats.

Inline code blocks?

If you just want to do inline code blocks, check out the CodeTag module.

Supporting organizations: 
Supporting Development

Project information

Downloads