Wrapping text in two tags instead of one

Hm, I fixed it by altering the initialization of highlight.js instead of altering ckeditor's behavior. Should anyone bump into this issue:

Create a config for CKEditor and load that like this

<script type="text/javascript">
        window.onload = function() {
            CKEDITOR.replace('text',
                    {
                        customConfig: '/static/libs/ckeditor/my_custom_config/my_config.js',
                        height: '800px'
                    }
            );
        };
    </script>

In your config (my_config.js) add a new style to the styles dropdown like this:

CKEDITOR.stylesSet.add( 'produx_styles', [
        { name: 'Code block', element: 'pre' },
    ]); 

This will wrap your highlighted text in pre tags.

Next step is to tell highlight.js to perform its magic on "pre" tags (instead of a code tag wrapped in a pre tag). In your HTML add the following:

<link rel="stylesheet" href="/static/libs/highlight.js/styles/default.css">
    <script src="/static/libs/highlight.js/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script>
        $(document).ready(function() {
            $('pre').each(function(i, e) {hljs.highlightBlock(e)});
        });
    </script>

Now highlight.js will highlight the code wrapped in just pre tags