Code highlighting in Drupal 9

Submitted by Rork on Mon, 12/07/2020 - 18:08

The next step will be to add some coding stuff to this website. It would be nice to add code highlighting first for better readability. Drupal 9 currently has three modules that offer code highlighting: CKEditor CodeSnippet, Server-sided code highlighting and GeSHi Filter for syntax highlighting. GeSHi filter seems to lack support for two languages I need. Therefore, I went for CKEditor CodeSnippet. I only recently found Server-sided code highlighting which I haven't tested but should be similar to CKEditor CodeSnippet.

CKEditor CodeSnippet implements the CodeSnippet Plugin for CKEditor which is installed by default. The plugin uses highlight.js for the actual highlighting, an overview of the supported languages and styles can be found on the demo page. The installation details of CKEditor CodeSnippet are well described on the module page. Please be aware that the CodeSnippet plugin should be installed in drupal://libraries and not in drupal://sites/all/libraries.

Configuring (extra) languages

CKEditor CodeSnippet supports the list of default languages. To install extra languages you'll have to download a custom bundle of highlight.js and configure them in Drupal. To configure the new languages a new module has to be made. This module should be loaded after codesnippet and therefore have a name that comes alphabetically after codesnippet. The module consists of two files in the root directory: MYMODULE.info.yml and MYMODULE.module. It appears that the module only works when editing a text format and not when creating one.

The info file registers the module with Drupal, it also allows to group the module with CKEditor CodeSnippet and add CodeSnippet as a dependency. For example:

name: CodeSnippet (rork.nl)
type: module
description: CodeSnippet language list modification for www.rork.nl
core: 8.x
core_version_requirement: ^8 || ^9
package: CKEditor

dependencies:
  - drupal:codesnippet

The code for MYMODULE.module file contains the hook provided on the module page under Additional Language Support. Besides adding languages, redundant languages may be removed and sorting can be made case-insensitive (so Perl comes before PHP):

// add a language
$form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']['r'] = 'R';

// remove a language
unset($form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']['xml']);

// sort case insensitive
asort($form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options'], SORT_STRING | SORT_FLAG_CASE);

My configuration module can be found on my GitHub.

Testing the code highlighting

After installation the code button can be added to CKEditor in Administration > Configuration > Text Formats and Editors. The language choices and style can also be selected there. It's a good idea to test the language in a special test-item.

One thing that I found out is that the Bartik theme increases the font-size for <code> elements somehow. This can be easily corrected by adding a font size reduction for <code> in theme://css/base/elements.css (Changing this in the core theme means that it has to be added each time Drupal core is updated):

code {
  font-size: 85%;
}

Tags