Displaying code snippets on the front-end with CKEditor

[Neo]

I need to display some code snippets via the body field (text area) on the front-end using highlight.js, which requires the following output format:

<pre><code class="languageClass hljs">

// Code goes here

</code></pre>

My frontend-styling is in place, but the problem is that CKEditor filters the markup and simply wraps everything in <pre> when using the "formatted" option.

I had a look at the pbckcode plugin, which I installed, but the generated markup does not include the <code>-element with the required language classes in CSS. It simply adds classes to <pre> and is not meant to work with highlight.js out-of-the-box according to the author.

I am not sure what is the best option to get this working and also to allow other tags in CKeditor (for example <code>, <small> etc.).

Would appreciate your advice.

 

 

[horst]

If you don't want to change the formatting options from CKEditor, one solution could be to write a little Textformatter and add it to CKEditor fields that contain those code snippets.

 

<?php namespace ProcessWire;

class TextformatterCodeHighlight extends Textformatter {

    public static function getModuleInfo() {
        return array(
            'title' => 'TextformatterCodeHighlight',
            'version' => 100,
            'summary' => '... ',
        );
    }

    public function format(&$str) {
        $out = trim($str);
        $search  = array(
            '<pre>',
            '</pre>'
        );
        $replace = array(
            '<pre><code class="languageClass hljs">',
            '</code></pre>'
        );
        $out = str_replace($search, $replace, $out);
        $str = $out;
    }
}

 

[horst]

I don't know this highlight.js, but if you need different classes for different code types, css js php etc, I would simply add those within [] right after the opening <pre>: <pre>[JS]

This way you are able to add the css classes to the <code without any hassle:

        $search  = array(
            '<pre>[JS]',
            '<pre>[CSS]',
            '<pre>[PHP]',
            '</pre>'
        );
        $replace = array(
            '<pre><code class="jsclass hljs">',
            '<pre><code class="cssclass hljs">',
            '<pre><code class="phpclass hljs">',
            '</code></pre>'
        );

 

[Neo]

Thanks Horst, that sounds like a good solution.

I actually thought about using the pbckcode plugin and configuring the language classes via config.js in CKEditors plugin folder, because the CSS classes are then automatically added to the <pre> tag via the back-end.

The problem is that the changes in config.js are not reflected in the back-end. Already tried to delete the cache and refreshed all modules without success.

 

You could then configure highlight.js to select a custom code container instead of using <pre><code>, e.g.:

$('pre').each(function(i, block) {
    hljs.highlightBlock(block);
});

 

Honestly, I thought there might be an easier solution to directly configure CKEditor via the back-end and also allow other tags (<code> etc.).

Update:

In this case the plugin configuration has to be placed in config-body.js to be reflected.

[horst]

You can configure CKEditor on a per field base. The forums are full of questions and answers. My own experiences are small. If I would use it on my own, and not for untrusted or tech-unsafy users, I simply would disable the ACF and the Purifier.

But you also can add rules directly into the fields input tab under extraAllowedContent, what works well, if you define it right.

[szabesz]

8 hours ago, horst said:

I would simply add those within [] right after the opening <pre>: <pre>[JS]

How about Hanna Code?