Skip to main content

CKEditor 5 for Drupal 9, syntax highlighting using highlight.js

Updated by Tim Rabbetts on
Add highlight js to ckeditor

CKeditor 5 is the new default for Drupal 9.  For syntax highlighting it comes with a code block button you can attach to the editor.

I started to use this but the syntax on the frontend wasn't highlighted.  I had to including the syntax highlighter in my theme.  

Add highlight js to ckeditor

I add the highlight js to my theme like this, I had to specify every library, sure there is better way of doing this.

global-styling:
 js:
   highlight/highlight.js: {}
   highlight/languages/php.min.js: {}
   highlight/languages/css.min.js: {}
   highlight/languages/xml.min.js: {}
   highlight/languages/sql.min.js: {}
   highlight/languages/bash.min.js: {}
   highlight/languages/json.min.js: {}
   highlight/languages/javascript.min.js: {}
   js/custom.js: {}
 css:
   component:
     highlight/styles/atom-one-dark.min.css: {}
 dependencies:
   - core/jquery
   - core/drupal
   - core/popperjs

And in custom.js I had this, finally got it working.

(function($, Drupal) {
 'use strict';
 Drupal.behaviors.sidney = {
   attach: function(context, settings) {
     hljs.highlightAll();
   }
 };
})(jQuery, Drupal);

 

Add new comment