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