LabGlo : Blog - How to integrate syntax highlighter in Django CKEditor

How to integrate syntax highlighter in Django CKEditor

Published on May 30, 2017, 7:24 p.m.

Before going to integrate syntax highlighter plugin, please make sure that you already installed CKEditor in your web app and its working. This article will help you for different language code 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.

python django pip

Blog

How to integrate syntax highlighter in Django CKEditor

Tags