マークダウン記法に対応させる Djangoで掲示板をつくってみる（4）

Djangoで作成した掲示板をマークダウン記法に対応させます。

作成した掲示板はこんな感じになります。 ⇒ 動作確認はこちらから

Contents

1 作成した掲示板をマークダウン記法に対応させる
- 1.1 templatetagsディレクトリと登録
- 1.2 テンプレートにタグを追加

作成した掲示板をマークダウン記法に対応させる

マークダウン記法とは、手軽にドキュメントを装飾できるフォーマットです。マークダウン記法を使うことで、見出しや強調などの文字装飾が簡単にできるようになります。

冒頭に「#」を入力すれば見出しを作ることができます。「#」の数で見出しの大きさも変えられます。また文字の前に「*」をつけることで箇条書きにすることもできます。他にも便利な使い方があるので各自で調べてみてください。

ではDjangoで作成した掲示板をマークダウン記法に対応させましょう。

まずMarkdownをインストールします。

$ pip install Markdown

1	$ pip install Markdown

templatetagsディレクトリと登録

そのあとbbsディレクトリ内にtemplatetagsという名前でディレクトリを作成します。そしてそのなかにmarkdown_extras.pyという名前のファイルを作成します。

markdown_extras.py

from django import template
from django.template.defaultfilters import stringfilter
import markdown as md

register = template.Library()

@register.filter()
@stringfilter
def markdown(value):
    return md.markdown(value, extensions=['markdown.extensions.fenced_code'])

from django import template

from django.template.defaultfilters import stringfilter

import markdown as md

@register.filter()

@stringfilter

def markdown(value):

return md.markdown(value, extensions=['markdown.extensions.fenced_code'])

次に内側のmyappディレクトリ内にあるsettings.pyを編集します。’libraries’の部分を追加します。

TEMPLATES = [
    {
        'OPTIONS': {
            # 以下の3行を追加 すでに'libraries':が存在する場合は 内部の1行だけ追加
            'libraries': {
                'markdown_extras': 'bbs.templatetags.markdown_extras' # 追記
            }
        },
        # それ以外の部分は変更しない
    },
]

TEMPLATES = [

{

'OPTIONS': {

# 以下の3行を追加すでに'libraries':が存在する場合は内部の1行だけ追加

'libraries': {

'markdown_extras': 'bbs.templatetags.markdown_extras' # 追記

}

# それ以外の部分は変更しない

]

テンプレートにタグを追加

あとはテンプレートファイルのなかで{% load markdown_extras %}を記述したあと、{{ article.content }}となっている部分を{{ article.content|markdown|safe }}に書き換えるだけです。<p>{{ article.content|markdown|safe }}</p>となっている場合はpタグは外しておきましょう（pタグ内部でh1タグやpタグは使えないので）。

article_list.html

{% extends 'layout.html' %}

{% load markdown_extras %}

{% block content %}

    <h1 class="mt-3 mb-4">投稿一覧</h1>

    <table class='table table-striped table-hover'>
        <tr>
            <th>投稿者</th>
            <th>内容</th>
        </tr>
        {% for article in object_list %}
        <tr>
            <td>
                <a href='{% url "bbs:detail" article.pk %}'>{{ article.title }} {{ article.author }}</a><br>
                作成日時：{{ article.created_at|date:"Y-m-j H:i" }}<br>
                更新日時：{{ article.updated_at|date:"Y-m-j H:i" }}
            </td>
            <td>{{ article.content|markdown|safe }}</td>
        </tr>
        {% endfor %}
    </table>

    {% if user.is_authenticated %}
    <p>
        <a href='{% url "bbs:create" %}'  class='btn btn-outline-primary'>新規投稿</a>
    </p>
    {% endif %}

{% endblock %}

{% extends 'layout.html' %}

{% load markdown_extras %}

{% block content %}

<tr>

</tr>

{% for article in object_list %}

<tr>

<td>

<a href='{% url "bbs:detail" article.pk %}'>{{ article.title }} {{ article.author }}</a><br>

作成日時：{{ article.created_at|date:"Y-m-j H:i" }}<br>

更新日時：{{ article.updated_at|date:"Y-m-j H:i" }}

</td>

<td>{{ article.content|markdown|safe }}</td>

</tr>

{% endfor %}

</table>

{% if user.is_authenticated %}

<p>

</p>

{% endif %}

{% endblock %}

改行の処理ですが、マークダウン記法では改行のあと半角スペースを2ついれます。改行ひとつだけでは改行されません。改行をふたついれると段落を変えることができます。

マークダウン記法に対応させる Djangoで掲示板をつくってみる（4）

作成した掲示板をマークダウン記法に対応させる

templatetagsディレクトリと登録

テンプレートにタグを追加

関連記事

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ