This module integrates the Prism.js syntax highlighting library into your Drupal site's WYSIWYG editor, allowing you to easily insert and style code examples directly into your content. It also provides a method for editors to insert pre-styled components into CKEditor5 without requiring special permissions.
This module enables the Prism Js plugin from prismjs.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. Since that project relies on WYSIWYG module, and this one only requires D9/10 core, it made sense to rename it.
This module provides a way to allow editors to insert styled components into CKEditor5 without having
to grant the editors permission.
Basic Usage
After completing the moduel installation, go to the filter format you want to configure (must be using CKEditor5). Drag the Prism Js icon into the active toolbar, and the config form will
appear below with a syntax highlighting style and supported languages
option. Configure the languages and theme from here /admin/config/content/prism-js. By default, few are checked for you. Uncheck ones you won't need, it's optional. This only controls the options in the dialog window of CKEditor5 when inserting a source code.
Note that your filter format must support the use of pre and code tags under allowed tags as well, if using anything other than Full HTML. You also need to configure the HTML filter (if Limit Allowed Tags is enabled) to allow the class attribute like so. Drupal 9 ships with CKEditor 5, so it depends on the ckeditor module from core.
Support
Please post bug reports, feature requests and support requests to the Prism Js module issue queue. If you met any problems with this module - feel free to create an issue.
Demo
- Go to https://simplytest.me/project/prismjs.
- Click "Launch Sandbox".
- Install Drupal as normal.
- Enable "Prism Js" module, and any optional modules you wish to try out.
- Go to /admin/config/content/prism-js and configure available languages and default theme
- Go to admin/config/content/formats/manage/full_html and drag the Prism js icon on the active toolbar
- Add content with text editor click on the prismjs icon and add your code. Double click on the code snippet to edit the source code.
Ask your assistant about Prism Js syntax highlighter
Check compatibility with your Drupal and PHP version, maintenance and security coverage, from current release data. How it works
Depends on
Dependencies of the latest stable release
- ckeditor5 Drupal core
Required by
Tracked projects that depend on this one
No tracked projects depend on this one yet.
Activity
Release Timeline
Releases
| Version | Type | Core | PHP | Release date | |
|---|---|---|---|---|---|
| 1.1.4 | Stable | 9–11 | Feb 1, 2025 | ||
| 1.1.3 | Stable | 9–11 | Feb 1, 2025 | ||
| 1.1.2 | Stable | 9–10 | PHP ^7.3 || ^8.0 | May 7, 2024 | |
| 1.1.x-dev | Dev | 9–11 | PHP ^7.3 || ^8.0 || ^8.1 | May 7, 2024 | |
| 1.1.1 | Stable | 9–10 | PHP ^7.3 || ^8.0 | Apr 27, 2023 | |
| 1.1.0 | Stable | 9–10 | PHP ^7.3 || ^8.0 | Mar 24, 2023 |