highlight.js Input Filter

The Highlight.js Input Filter module for Drupal integrates the popular highlight.js JavaScript library with the CKEditor 5 rich text editor, providing automatic syntax highlighting for code snippets in Drupal content. This module enhances the readability and presentation of programming code, markup, and other technical content within CKEditor fields, and has the potential to support over 250 programming languages.*

Ideal for websites that feature technical content, tutorials, developer documentation, or educational resources, the highlight.js Input Filter module ensures that code snippets are displayed in a professional, clean, and easily understandable way without the need for manual styling or complex setups.

Key features of this module include:

• Automatic Syntax Highlighting:
  Code blocks are automatically highlighted using highlight.js when embedded within CKEditor 5 content fields with the following markup.

  <pre><code class="langauge-*">

• Customizable Themes:
  Easily switch between various highlight.js themes to match your website’s design and aesthetic needs, offering complete flexibility in the presentation of code.
• Code Copy Button:
  Add a convenient button that allows users to copy the code snippet to their clipboard with a single click, making it easier for visitors to use and share code examples.
• Multiple filter formats:
  Include multiple fields with filter formats enabled on the page, and all code blocks are highlighted appropriately.
• Efficient Resource Loading:
  The module optimizes performance by only loading the relevant highlight.js styles for the programming languages used in each CKEditor 5 enabled field. This ensures faster page loads and minimal bloat, as only the necessary styles are loaded.
• Supports Over 250 Programming Languages:
  Whether it’s JavaScript, PHP, Python, HTML, CSS, Ruby, SQL, Java, or any other supported programming language, your code snippets will always be highlighted correctly.*
• Seamless Integration:
  Fully integrated with CKEditor 5 and Drupal, this module requires minimal configuration, making it simple for developers and content creators to get started with code highlighting right away.

Configuration

1. Navigate to Configuration > Content Authoring > Text formats and editors.
2. Click the configure button next to the filter format for which you want to enable syntax highlighting.
3. Ensure the Text editor field has CkEditor 5 selected.
4. Within the Toolbar configuration section, drag the Code Block button from Available buttons to the Active toolbar.
5. Under the CKEditor 5 plugin settings section, click the Code Block tab, and modify the list of pragramming languages available for the text format.
6. Under Enable filters, check the box next to Highlight code using highlight.js.
7. Save the text format configuration.

The highlight.js theme can be configured on the module settings page at Configuration > Content Authoring > highlight.js Input Filter settings. Visit the highlight.js Examples page to see each theme in action.

The code copy button is enabled by default, but can be disabled from the module settings page.

Usage

1. Add a new, or edit an existing, entity which has a formatted field and has the Highlight code using highlight.js input filter enabled.
2. Click the dropdown arrow on the Code Block button to select a language and insert a code block.
3. Add code.
4. Save and view the entity.

*Not all programming languages supported by highlight.js are available with this module yet due to complications described in issue #3401537. If you need a language supported, please create an issue.