CKEditor CodeSnippet

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.

Drupal 10 / CKEditor 5 Support

This module will not have a port to work with CKEditor 5. Drupal 10.1 core ships with a migration path for Codesnippet to take advantage of the new 'Code Block' plugin in 10.1 which is largely a port of Codesnippet itself into CKEditor 5, made available in Drupal. This will convert all your current Codesnippet settings over for you so you can continue using CKEditor 5.

See this thread for more information and upgrade path: https://www.drupal.org/project/drupal/issues/3356929

When 10.1 is available, all you need to do will be to change your text format from CKEditor to CKEditor 5.

You will need to acquire a code highlighting engine. Drupal core will only handle ensuring the markup is in place for your code snippets. You can try one of the following:

https://www.drupal.org/project/highlight_php

https://www.drupal.org/project/highlightjs_input_filter

===========
===========

Drupal 9 / CKEditor 4

Drupal 8/9 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.

Composer-based Installation

The module will install the plugin automatically.

Manual Installation

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

Finally, enable the module in the Drupal admin, and 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.