highlight_js

Overview

The Highlight Js(CKEditor5) module for Drupal 9/10 enriches the content editing experience by seamlessly integrating the powerful syntax highlighter, Highlight Js, into CKEditor5. This module empowers content editors to incorporate stylishly highlighted source code snippets into their Drupal content without the need for elevated permissions.

This module integrates the Highlight.js library (version 11.9.0) into Drupal websites, enhancing the syntax highlighting capabilities for code snippets within content. Highlight.js is a widely-used JavaScript library that provides a simple and efficient way to highlight and style code on web pages, supporting a multitude of programming languages and markup formats.

Configuration

To configure the CKEditor5 Highlight Js module, follow these steps:

1. Navigate to the desired filter format (ensure CKEditor5 is being used) here from here 'admin/config/content/formats'.
2. Drag the Highlight Js icon into the active toolbar.
3. Enable the checkbox labeled 'Highlight Js' filter.
4. Adjust language, theme, and copy-to-clipboard button settings by visiting '/admin/config/content/highlight-js'.
5. By default, some languages are pre-selected. Uncheck any unnecessary ones according to your requirements. This selection influences the options available in the CKEditor5 dialog window when inserting source code.
6. Configure permissions for the 'Highlight Js' settings by navigating to '/admin/people/permissions/module/highlight_js' for different roles.

Note: Ensure that your filter format permits the use of <pre> and <code> tags under allowed tags, especially if using a format other than Full HTML. Configure the HTML filter (if "Limit Allowed Tags" is enabled) to include the class attribute.

Usage

Follow these steps to enable and use the Highlight Js text filter:

1. Create a new content or edit an existing one, ensuring CKEditor 5 is enabled.
2. When the Highlight.js icon is clicked within the editor, a dialog box will appear. This dialog box includes options to select a programming language and a text area field labeled "Source Code" where you can input the code you wish to have syntax highlighted.

Highlight Js Supported Languages

Highlight Js supports a vast array of languages and themes. You can choose from 240+ languages and more than 250 themes, which will be available in the CKEditor5 Highlight Js dialog. Simply check the ones you need to include.

Key features of the HighlightJS Drupal module include:

1. Syntax Highlighting: The module leverages the capabilities of the Highlight.js library to automatically detect and highlight syntax in code snippets embedded within Drupal content. This ensures that code is not only displayed but also visually enhanced for better readability.
2. Wide Language Support: Highlight.js supports a vast array of programming languages and markup formats, ranging from popular ones like JavaScript, HTML, and CSS to more specialized languages. The Drupal module inherits this language support, making it versatile for developers working with various technologies.
3. Integration with Drupal Content: The module seamlessly integrates into the Drupal content management system, allowing users to add code snippets to articles, pages, or other content types. By doing so, it provides a user-friendly solution for developers and content creators who wish to display code examples in their Drupal-powered websites.
4. Customization Options: Users have the flexibility to customize the appearance of the highlighted code through various configuration settings. This includes choosing different color schemes, adjusting the copy buttom, and available programming language settings on the editor.
5. Responsive Design: The module and the underlying Highlight.js library are designed to be responsive, ensuring that the syntax-highlighted code adapts well to different screen sizes and devices. This is crucial for maintaining a consistent and user-friendly experience across various platforms.
6. Regular Updates: With the integration of Highlight.js version 11.9.0, the Drupal module benefits from the latest improvements and language support introduced in the library. This ensures that Drupal website owners can stay up-to-date with the evolving landscape of programming languages and technologies.

What if I have already written a code section using the default code block provided by Drupal, or if I want to use the default code block?

If you've already written a code section using the default code block provided by Drupal or if you prefer to use the default code block, follow these steps:

1. Navigate to Configuration » Content authoring » Text formats and editors and configure the desired filter format (ensure CKEditor5 is being used) from here 'admin/config/content/formats'.
2. Drag the 'Code Block' icon into the active toolbar if it doesn't already exist.
3. In the 'CKEditor 5 plugin settings' section, click on 'Code block'. Add new programming languages in the 'Programming languages' field using valid key-value pairs if needed (e.g., php|PHP, python|Python, ruby|Ruby), or leave it if the default values suffice. You can refer to the list of valid programming languages from the following link: highlightjs.org/demo for the Highlight Js syntax highlighter.
4. Adjust the theme and copy-to-clipboard button settings by visiting '/admin/config/content/highlight-js,' and make sure to leave the 'language' settings as it is. After saving the configuration, be sure to clear the cache. Then, visit the page containing the code block. The Highlight.js theme will be applied to the code block based on the configured settings.

The advantage of using the default 'Code Block' provided by Drupal is that it can be inserted seamlessly even within lists and sublists in the editor.

Support

Please post bug reports, feature requests and support requests to the Highlight Js syntax highlighter module issue queue. If you met any problems with this module - feel free to create an issue.