How to integrate syntax highlighter in Django CKEditor

Before integrating the syntax highlighter plugin, please make sure that you already installed CKEditor in your web app and it’s working. This article will help you with different language codes and highlight code syntax.

1. Download syntaxhighlight plugin for CKEditor 3.x Here

2. Extract zip folder and open it, here you can find the folder named "syntaxhighlight".

3. Copy above folder and paste into to your existing ckeditor/plugins/ folder (This path will be in you virtual environment)

4. Also paste the same above folder to your static folder, this will be used while adding static files of syntax highlighter in templates.

5. Now you can add the extra plugin settings to you CKEDITOR_CONFIGS and it will look like as below (Order of defining settings important here),

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar':[ ['Syntaxhighlight', ], ],
        'extraPlugins': ','.join(
            [
                'syntaxhighlight',

            ]),
        'toolbar': 'Advanced',
        'width': 1000,
        'height': 500,
        'uiColor' : '#9ccde5',
         .
         .
         .
         .

    },
}

6. Finally you have to add CSS and JS files of syntax highlighter to your page template to render the syntax highlighting visible as follow:

This should be add in <head> </head> tag,

<!-- syntaxhighlighter for use in ckeditor plugin -->
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shCore.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushBash.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushCpp.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushCSharp.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushCss.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushDelphi.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushDiff.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushGroovy.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushJava.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushJScript.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushPhp.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushPlain.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushPython.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushRuby.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushScala.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushSql.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushVb.js' %}"></script>
<script type="text/javascript" src="{% static 'syntaxhighlight/scripts/shBrushXml.js' %}"></script>
<link type="text/css" rel="stylesheet" href="{% static 'syntaxhighlight/styles/shCore.css' %}"/>
<link type="text/css" rel="stylesheet" href="{% static 'syntaxhighlight/styles/shThemeDefault.css' %}"/>

This should be add in <body> tag,

<script type="text/javascript">
    SyntaxHighlighter.config.clipboardSwf = 'static/syntaxhighlight/scripts/clipboard.swf';
    SyntaxHighlighter.all();
</script>

All set go and try on.

How to integrate syntax highlighter in Django CKEditor

Before integrating the syntax highlighter plugin, please make sure that you already installed CKEditor in your web app and it’s working. This article will help you with different language codes and highlight code syntax.

START A CONVERSATION