【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; 
}

③css読み込み

html側で以下を記載し、②で設定したファイルを読み込ませます。

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

④再起動

サーバを再起動して、反映を確認してみてください。


・まとめ 

いかがだったでしょうか。

以降はdjango-summernoteのスタイルでコード指定したものはこのcssの通りに表示されるようになります。

cssの設定を書き換えて内容を好みのものにも変えてもらえるので、django-summernoteのデフォルトのものよりも良くなるとも思います。



コメント一覧

コメント投稿ページへ


書いている人

のぎ
PG->SE->PMとして働き、現在はIT企業で新卒採用の担当をしています。長期育休取得明けで0歳娘の対応に毎日バタバタです。笑
採用業務をしつつ社内利用ツールなど作成しており、当ブログも勉強の一環でコーディングして作成しています。 エンジニア領域、人事・採用領域、育児関連など発信していきます。