What is the solution to highlight PHP, JavaScript, or Java code in Drupal 8 articles?

I googled and found some information about Geshi for CKeditor. I installed it, but it converted < and > into HTML entities.

I lost a few hours, and I was not able to fix it, not for Drupal 8 and the latest Geshi version.

I am looking for the ultimate full solution to present code. Do you have any suggestion?

  • Don't use GeShi in Ckeditor. A mix of the codesnippet module as suggested in Kevin's answer for back-end editing and the GeShi filter module for frontend output is the solution we have a very good experience with and also created a bridging text filter for Drupal 8 that can easily be converted into a custom text filter for Drupal 7. Please check the available Drupal modules yourself at Drupal.org. As asking for module recommendations is out of Drupal Answer's scope. – Mario Steinitz Aug 21 '18 at 15:00

There is CKEditor CodeSnippet, which has an integration module.

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.

Disclaimer: I am a maintainer of that module.

Edit: to clarify, CKEditor has a native plugin called CodeSnippet - the Drupal module linked above provides an integration to it.

| improve this answer | |
  • I like the disclaimer. ;) - But prefer GeShi filters for the frontend. – Mario Steinitz Aug 21 '18 at 14:52
  • I've actually never been able to get GeShi to work. – Kevin Aug 21 '18 at 15:03
  • Yeah, the filter module lacks a little in terms of usability with CKEditor and requires some text filter tweaks. That's why we also use codesnippet for editing and WYSIWYG experience, and then convert it's syntax to GeShi tokens in a bridging text filter: drupal.org/project/codesnippet_geshifilter – Mario Steinitz Aug 21 '18 at 15:13
  • @Kevin Your solution has not code line numbering? – trzczy Aug 21 '18 at 18:50
  • @MarioSteinitz drupal.org/project/codesnippet_geshifilter has code line numbering? Doesn't it convert < and > to &gt; etc? – trzczy Aug 21 '18 at 18:52

Not the answer you're looking for? Browse other questions tagged or ask your own question.