django-ckeditorにコードスニペット機能を追加

django-ckeditorはリッチテキストエディター（多機能な編集機能を持った入力装置？）を提供してくれる便利なライブラリです！

インストール方法は割愛します。（時間があれば別記事で書いてみます！
今回は、ckeditorにコードスニペット（pythonやJSなどのコードをいい感じに表示してくれる機能）を実装する方法をまとめたいと思います。

Step1. CKEDITOR_CONFIGにプラグインを認識させる。

django-ckeditorの設定をする際に、setting.pyの中に以下のような記述を行っていると思います。

setting.py

CKEDITOR_CONFIGS = {
    'default': {
        'height': 150,  # defaultで高さ150pxに固定という意味
        'width': '100%',  # defaultで親要素の幅に固定　ー＞　便利です。
    },
}

少し、設定をいじっていますがこんな感じになっているはずです。

ここでは自作の設定などを追加したりすることができますが、内容が本記事の趣旨と異なりますので別記事で。

続いて、以下のような自作設定に'extraPlugins'という形でコードスニペット機能を追加します。（この他にもdjango-ckeditorはプラグインという形で機能を拡張させることが可能です。

setting.py

CKEDITOR_CONFIGS = {
    'custom_toolbar': {
        'height': 150,
        'width': '100%',
        'toolbar_Custom': [
            ['CodeSnippet'],  # これがコードスニペットの機能
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            ['TextColor', 'BGColor'],
            ['Link', 'Unlink'],
            ['NumberedList', 'BulletedList'],
            ['Maximize'],
            ['Styles', 'Format'],
        ],
        'toolbar': 'Custom',
        'extraPlugins': ','.join(['codesnippet']),  # コードスニペット機能のプラグイン

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

Step2. templateでコードスニペットの表示を有効にする。

このままでは、templateにて作成した文章などを呼び出したときコードスニペットが以下のように有効になりません。

templateで有効にするためには、以下のJS/CSSファイルの読み込みが必要です。

template

{# テーマに関するcssファイル #}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">


{# JSファイル＋実行 #}
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
 

これでtemplateでテーマの割当が以下のように行われます。

番外編：テーマを変更する

ちゃんとテーマが割り当てられる用になりましたが、なにか物足りない。。。他のテーマを割り当てたい！というときは以下のサイトから好きなテーマを探して見てください。
各テーマのCDNを利用することができます。

例えば、monokaiに変更したいときは

template

{# テーマに関するcssファイル #}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">　-->これを変更

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

上記のように変更したいテーマのcssファイルを指定すれば以下のように好きなテーマを割り当てることが可能です！

終わりに

多くの機能を作成して頂いてありがとうございます。。。先人に感謝です。笑