Django cms - Highlight your code

How to highlight your code snippets in the ckeditor of django cms

January 02, 2017

Django cms - Highlight your code

How to highlight your code snippets in the ckeditor of django cms


I struggled a bit to highlight my code snippets on this blog so here is the solution I found. 

The result looks like this : 

/* Hello World program */

#include

main()
{
    printf("Hello World");

}

 

I first tried to add the ckeditor plugin : http://ckeditor.com/addon/codesnippet but I wasn't able to rebuild all the logic behind the ckeditor plugin. 

A simpler solution is to use the djangocms-snippet app : https://github.com/divio/djangocms-snippet

Once this one installed, you can add simple code snippets via the ckeditor plugin dropdown list : 

Screen Shot 2017-01-02 at 17.05.05.png

Screen Shot 2017-01-02 at 17.05.20.png

It provides a really basic display.

To change it, I wanted to use highlight.js

Download the hightlight.js components to your assets directory and add the css and js in your blog template.

I added them in the base.html template of the aldryn_newsblog plugin : 

vendor/highlightjs/highlight.pack.js
vendor/highlightjs/styles/monokai-sublime.css

To make it work, you have to change the djangocms-snippet template (in templates/cms/plugins/snippet.html) : 

Screen Shot 2017-01-02 at 17.19.43.png

It doesn't provide html hightlight for the moment, I'll improve it later.

Hope this is useful