Added code snippet functionality to django-ckeditor

django-ckeditor is a handy library that provides a rich text editor (an input device with multifunctional editing capabilities?)!

I will omit the installation method. (If I have time, I will write it in another article! This time, I would like to summarize how to implement a code snippet (a function that displays code such as python and JS nicely) in ckeditor.

Step1. Make CKEDITOR_CONFIG recognize the plug-in.

When setting django-ckeditor, I think that the following description is made in setting.py.

setting.py

CKEDITOR_CONFIGS = {
    'default': {
        'height': 150,  #By default, it means fixed to height 150px
        'width': '100%',  #Fixed to the width of the parent element by default-> convenient.
    },
}

I've been tweaking the settings a bit, but it should look like this.

You can add your own settings here, but the content is different from the purpose of this article, so it will be in a separate article.

Next, add the code snippet function in the form of'extraPlugins' to the following self-made settings. (In addition to this, django-ckeditor can extend its functionality in the form of plugins.

setting.py

CKEDITOR_CONFIGS = {
    'custom_toolbar': {
        'height': 150,
        'width': '100%',
        'toolbar_Custom': [
            ['CodeSnippet'],  #This is the function of the code snippet
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            ['TextColor', 'BGColor'],
            ['Link', 'Unlink'],
            ['NumberedList', 'BulletedList'],
            ['Maximize'],
            ['Styles', 'Format'],
        ],
        'toolbar': 'Custom',
        'extraPlugins': ','.join(['codesnippet']),  #Code snippet function plugin

    },
    'default': {
        # 'toolbar': 'Basic',
        'height': 150,
        'width': '100%',
    },
}

Step2. Enable the display of code snippets in template.

If nothing is done, the code snippet will not be enabled as shown below when calling the text created by template.

To enable it with template, you need to read the following JS / CSS file.

template

{#Thematic css file#}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">


{#JS file + execute#}
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
 

Now the template will assign the theme as follows.

Extra: Change the theme

The theme is now assigned properly, but something is not enough. .. .. I want to assign another theme! In that case, please search for your favorite theme from the following site. You can use the CDN of each theme.

https://cdnjs.com/libraries/highlight.js

For example, if you want to change to monokai

template

{#Thematic css file#}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">　-->Change this

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/monokai.min.css">　-->After change
 

If you specify the css file of the theme you want to change as above, you can assign your favorite theme as follows!

At the end

Thank you for creating many features. .. .. I thank my ancestors. Lol