【Django】django-summernoteを導入しても、ソースコード表示ができない時の対応

カテゴリ：Django　投稿：2022年5月31日0:17、更新：2022年6月11日23:28

・記事の概要　

django-summernoteを用いてコーディングスタイルで書いた内容を綺麗に反映したい場合の手順を記載します。

・この記事の対象　

djangoでブログを自作している方。

django-summernoteを導入したものの、スタイルのコード指定で書いた内容がうまく反映されない方。

djangoでpreやcodeタグがうまく反映されないという方。

・この記事でできるようになること　

django-summernoteのスタイルでコード指定したものが、きちんとコーディングの様式で表示されるようになります。

またデフォルトのコード指定よりも、コーディングライクな表示に変更することができます。

・実際の手順　

①django-summernoteの確認

スタイルでコード指定したものが実際はどのようなコーディングになっているかを管理画面より、「</>(コード表示)」で見てみると

<pre class=""><span style="font-size: 12px;">コーディング部分</span></pre>

のようにpreタグで囲まれていることがわかります。

②preタグにcss設定

やり方は単純でcssファイルでpreタグに設定をしていきます。

djangoではデフォルトで、静的ファイルは「app_name/static」から読み込もうとします。

なのでまずはアプリケーション配下にstaticディレクトリを作成してください。

その配下にmain.css（ファイル名は任意）を作成し、以下を記載してください。

pre {
  margin: 1em 0; 
  padding: 1em; 
  border-radius: 5px; 
  background: #25292f; 
  color: #fff; 
  white-space: pre-wrap; 
}

{% load static %}
<link rel="stylesheet" href="{% static 'main.css' %}">