[Django]変数内に格納したhtmlコードを反映させたい

Djangoでブログシステムのようなアプリケーションを作る際に、<h2>タグやリンクタグ、画像タグなどhtmlコードで記述したものはそのままで表示されます。

これをコードむき出しで表示するではなく、Webページのように出力したい場合の方法を紹介します。

htmlコードをエスケープせずに表示したい

ちょっと語彙力が・・・

なんと説明すれば伝わるのか、うまく文章化できませんが要するにやりたいことはこんな感じです。

{% extends 'blog/base.html' %}

{% block content %}
<div class="post">
    {% if post.published_date %}
    <div class="date">
        {{ post.published_date }}
    </div>
    {% endif %}
    <h1>{{ post.title }}</h1>
    <p>{{ post.text}}</p>
</div>
{% endblock %}

上記はDjangoのチュートリアルであるDjangoGirlsのプロジェクトを参考にしたものです。

このチュートリアルでは簡単なブログシステムを作成するのですが、本文部分は{{ post.text }}で表示されます。

しかし、このままでは本文中に見出しを付けたり、色を変えたり、テーブルタグを挿入してもソースコードがそのままで表示されます。

やりたいことはhtmlコードをエスケープせずに表示したいわけです。

filterのsafeを使う

上記の問題を解決するには、safeを使います。

{{ post.text | safe }}

これでもう一度見てみると、

エスケープが無効されていますね。

CSSを細かく設定していないので行間などが整っていませんが、htmlコードをしっかり表示させることができます。