• Reset your password
Home
OO PHP, Drupal, Symfony Developer and Architect
Tim Rabbetts

Main navigation

  • Home
  • Blog
  • Log in

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

Breadcrumb

  • Home
  • blog
  • ckeditor 5 for drupal 9 syntax highlighting using highlightjs
  • CKEditor 5 for Drupal 9, syntax highlighting using highlight.js
Tim
Rabbetts
By zarexogre | Sun, 15/01/2023
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);