Posted on

CodeMirror Blocks

CodeMirror Blocks is a good plugin for displaying good-looking code blocks in WordPress (you can see it in action right here on!). There’s a problem with Relevanssi in-document highlighting and the CodeMirror block, though: enabling the highlighting will break all CodeMirror blocks on the page, even if the highlighting happens outside the block.

This problem happens because CodeMirrors stores the block parameters in a settings attribute, and Relevanssi in-document highlighting breaks that attribute. Fortunately, this is easy to fix with a filter function that runs after the Relevanssi in-document highlighting and fixes the broken attribute. Add this to your theme functions.php:

add_filter( 'the_content', 'rlv_restore_codemirror_settings', 12 );
function rlv_restore_codemirror_settings( $content ) {
    $data_settings_found = preg_match_all( '/data-setting="{(.*)}"/', $content, $data_settings );
    if ( $data_settings_found ) {
        foreach ( $data_settings[1] as $data_setting ) {
            $content = str_replace( $data_setting, htmlentities( $data_setting ), $content );
    return $content;

Leave a Reply

Are you a Relevanssi Premium customer looking for support? Please use the Premium support form.

Your email address will not be published. Required fields are marked *