IMAXおじさんの技術系備忘録

DjangoでMarkdown形式のエディタを実装，HTML形式で表示する

2022年8月30日

Djangoでマークダウン形式のエディタを爆速で実装します．参考にしたサイトは以下です．

mdeditorとは

Markdown形式のエディタをDjangoに爆速で実装できるライブラリです．ここ実際に動作しているところはリンク先をご覧ください．結構有能なのでびっくりします．

環境

Ubuntu18.04 LTS(さくらVPS)
Python3.6.8
Django==3.0
django-mdeditor==0.1.18
Markdown==3.3.4

mdeditorの実装

まず，pipで必要なライブラリを入れましょう

pip install django-mdeditor
pip install Markdown

mdeditor自体の設定をしていきます．settings.pyに以下を追記します．

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'mdeditor' #これを追記
]
X_FRAME_OPTIONS = 'SAMEORIGIN'
MDEDITOR_CONFIGS = {
    'default': {
        'language': 'en',
    }
}

次に，models.pyを設定していきましょう．app内で定義するModelを以下のように定義します．普段使っているmodels.TextFieldが Markdown形式のオブジェクトになります

#models.py
from django.db import models
from mdeditor.fields import MDTextField

# Create your models here.
class Article(models.Model):
    title = models.TextField(max_length=200)
    content = MDTextField() #ここがMarkdown形式のTextFieldになる

    def __str__(self):
        return self.title

また，{project_name}/urls.pyに以下を追記します．

urlpatterns = [
    path('admin/', admin.site.urls),
    path('mdeditor/', include('mdeditor.urls')) #これを追記
]

admin.pyへの追記を忘れずに！

# admin.py
from django.contrib import admin
from .models import Article

# Register your models here.
admin.site.register(Article)

現時点でDjango Adminの管理画面からMarkdown形式で編集できるようになっているはずです．

Markdown_to_htmlの実装

次に，MarkdownをHTMLに変換していい感じに表示されるようにしていきましょう．先ほど定義したArticleモデルに次を追記していきます．

#models.py
from django.db import models
from mdeditor.fields import MDTextField
import markdown #ここを追記

# Create your models here.
class Article(models.Model):
    title = models.TextField(max_length=200)
    content = MDTextField() #ここがMarkdown形式のTextFieldになる

    def __str__(self):
        return self.title

    # 以下を追記
    def markdown_to_html(self):
        md = markdown.Markdown(
            extensions=['extra', 'admonition', 'sane_lists', 'toc']
        )
        html = md.convert(self.content)
        return html

このメソッドをHTML内のDjangoテンプレートから呼び出していきます．以下は関連する部分のHTMLコードです．

<!doctype html>
{% extends 'base.html' %}
{% load static %}

{% block content %}

{% for item in object_list %}
<article class="blog-post">
  <h4 class="blog-post-title">{{ item.title }}</h4>
  {{ item.markdown_to_html|safe }}
</article>
{% endfor %}
{% endblock %}

これだけだとコード整形のみが為されてお洒落なシンタックスハイライトがつきません．いい感じの見栄えにするために以下をHTML内に追記します．

<head>
  ...
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/a11y-dark.min.css">
  ...
</head>

<body>
  ...
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</body>

これで完了です．試しにサーバーを立ち上げて確かめてみてください．

python3 manage.py runserver

DjangoでMarkdown形式のエディタを実装，HTML形式で表示する

mdeditorとは

環境

mdeditorの実装

Markdown_to_htmlの実装

About

Category

Archives

Link