About Prism Syntax Highlighter

Prism JS Syntax Highlighter

Category Text Formatters
Textformatter modules that provide run-time formatting for blocks of text (typically used with Text/Textarea fields).
Release StateBeta
Close to stable, but users are advised to be cautious and test thoroughly.*
Module Version2.0.0
Class NameTextformatterPrism
Date AddedJanuary 12, 2017
Last UpdatedApril 4, 2017
Recommended ByNew recommendations may take up to 1 day to appear.


This module's files should be placed in /site/modules/TextformatterPrism/
How to install or uninstall modules


ProcessWire Prism JS Syntax Highlighter

A module to parse given HTML and syntax-highlight code elements using Prism


  • v2.0.0
    • Improved language parsing logic
    • Prevent 404s from nonexistent files
    • Renamed hookable functions, update your hooks accordingly. See below for more information.



  • Add module to /site/modules/ and then install.
    Or go to Modules > Install > Add New and use any of the options provided to to install.

  • Create a text/textarea field and pick Prism Syntax Highlighter from Details > Text Formatters.

    Protip: This module parses HTML markup, so it should come after HTML parsers such as Markdown textformatters.

  • Add code elements within the field content with language-xxxx classes. Or pick a default language from configuration page if you are unable to specify the classes.

  • Select any plugins you want. To use some plugins, extra classes are required. See plugin documentation.

  • Install these recommended modules for the best experience:


  • Go to module configuration to specify:
  • Auto inclusion of highlighters for parsed languages
  • Default language for inline code elements or ones without language-xxxx classes.
  • Ability to use minified/non-minified component and parser files
  • Plugins
  • Themes
  • Custom JS and CSS for configuration / theming
  • Ability to use hooks to specify custom CSS and JS


Hook into TextformatterPrism::getCss and TextformatterPrism::getJs in your ready.php file.

  • $event->arguments includes two arguments, first one $languages an array of parsed language names, second $plugins an array of picked plugin names. To include your own JS/CSS mutate $event->return.
// specify custom CSS
wire()->addHookAfter('TextformatterPrism::getCss', function (HookEvent $event) {
    $css = $event->return;
    $css[] = '/path/to/custom.css'
    // return an array of urls
    $event->return = $css;
// Specify custom JS
wire()->addHookAfter('TextformatterPrism::getJs', function (HookEvent $event) {
    $js = $event->return;
    $js[] = '/path/to/custom.js'
    // return an array of urls
    $event->return = $js;