Prismatic

FAQ

Can you add another language for Prism.js or Highlight.js?

Yes, feel free to suggest a language

Does this work with Gutenberg Block Editor?

Yes, the plugin provides a “Prismatic” block that makes it easy to add code snippets that will be highlighted on the front-end. Also provides “add code” buttons for the Classic TinyMCE (Visual/Text) Editor. Add code, choose a language, done!

Display syntax-highlighted code inside Block Editor?

If for some reason you want to view syntax-highlighted code inside of the Block Editor, you can do it with the Classic Block:

1. Select the Classic Block
2. Click on the Prismatic TinyMCE button
3. Enter your code and save changes

The code won’t be highlighted initially, but if you refresh the page after making changes, or visit the page again in the future, the code will be displayed with syntax highlighting applied.

How to syntax highlight code inside of ACF field?

As of Prismatic version 2.3, code snippets inside of ACF fields are highlighted automatically. Simply add the required class (e.g., language-php) just like any other code snippet, and the plugin will detect and highlight the code. To also escape the highlighted code, enable escaping for post content via the setting, Prism > Code Escaping > Content. Note: ACF is supported only on single post views.

How to make highlighting work with Autoptimize?

For Prismatic plugin to work with Autoptimize, a script needs to be excluded. Follow these steps:

1. Go to Autoptimize Settings > Javascript Options > Exclude scripts from Autoptimize

2. Add the following to the excluded scripts list:

   wp-content/plugins/prismatic/lib/highlight/js/highlight-core.js

Save changes and done. You may need to empty cache and/or force-reload your web browser for the script to load and changes to take effect.

How to disable block styles on frontend?

If you are not using Gutenberg Block Editor, you can disable the plugin’s block stylesheet. Simply enable the plugin setting, “Block Styles”. Save changes and done.

FYI: the Prismatic block styles are included via: /prismatic/css/styles-blocks.css

How to escape nested code tags?

Currently the only way to display nested <code> tags is to use the following shortcode:

[prismatic_code][/prismatic_code]

Currently this works only for inline <code> tags. More details here.

Line numbers not working?

Apparently some themes have problems displaying line numbers on highlighted code snippets. A possible solution is to add the following code via theme template or simple plugin:

function prismatic_add_body_class($classes) {

    $classes[] = 'line-numbers';

    return $classes;

}
add_filter('body_class', 'prismatic_add_body_class');

All that’s doing is adding a class named line-numbers to the body tag of your web pages. Should do the trick to get line numbers working on stubborn themes. Original idea posted here.

How to filter the language menu?

Check out Filtered Language Menus with Prismatic WordPress Plugin.

How to disable highlighting code in comments?

Check out Disable Highlighting in Comments with Prismatic WordPress Plugin.

How I can remember to include the shortcode tags?

Thanks to @hupe13, you can add this snippet to make sure the shortcode is included when working with blocks:

function prismatic_block_shortcode_mod($block_content, $block) {
    if ($block['blockName'] === 'prismatic/blocks') {
        if (strpos($block['innerHTML'], 'prismatic_code') === false) {
            return str_replace('[', '[', $block['innerHTML']);
        }
    }
    return $block_content;
}
add_filter('render_block', 'prismatic_block_shortcode_mod', 10, 2);

Hai domande?

Invia domande o feedback tramite il mio modulo di contatto