django-mdeditorのプレビュー通りに表示をする方法

# django-mdeditorのプレビュー通りに表示をする方法
[django-mdeditor](https://github.com/pylixm/django-mdeditor/)の利用に際して、コンテンツをプレビュー通りに表示したかった。
適当にググってきた方法を試してみたが、絵文字、tex等のプレビューが正しく行われなかった。
以下に参考にしたサイトを示す。(※批判ではないです）

https://yuki.world/django-markdown-implement/

https://qiita.com/Yoshida-Programmer/items/72529b2f7cdda042e396

上記の方法では、[Python-Markdown](https://pypi.org/project/Markdown/)を利用して表示をしていた。
Python-Markdownをもちいることで、コードブロックや表等のプレビューは行われるようになるが、絵文字やtexは対象外のためプレビューされていなかった。

生成されたhtmlを見てみたところ、プレビュー画面でmarkdownから変換されたhtmlとPython-Markdownを用いて変換されたhtmlでは内容が異なっていた。

そのためdjango-mdeditorが提供しているcssやjsを読み込んでもうまく反映されていなかったことが原因であろうと考えられる。

## プレビュー通りに表示をする方法
本家のgithubを参照したところ、プレビュー通りに表示する方法が載ってました。

https://github.com/pylixm/django-mdeditor/blob/master/mdeditor_demo_app/templates/show.html

適用されていなかった原因としてはコンテンツをtextareaタグで囲っていなかったためである。なので、

```django:article.html
{% load static %}
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>{{ article.title }}</title>
        <link href="{% static 'mdeditor/css/editormd.min.css' %}" rel="stylesheet">
        <link href="{% static 'mdeditor/css/editormd.preview.css' %}" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>
    <body>
            <div id="content">
                <textarea>{{ article.content }}</textarea>
            </div>
            <script src="{% static 'mdeditor/js/jquery.min.js' %}"></script>
            <script src="{% static 'mdeditor/js/editormd.min.js' %}"></script>
            <script src="{% static 'mdeditor/js/lib/marked.min.js' %}"></script>
            <script src="{% static 'mdeditor/js/lib/prettify.min.js' %}"></script>
            <script src="{% static 'mdeditor/js/lib/raphael.min.js' %}"></script>
            <script src="{% static 'mdeditor/js/lib/underscore.min.js' %}"></script>
            <script src="{% static 'mdeditor/js/lib/sequence-diagram.min.js' %}"></script>
            <script src="{% static 'mdeditor/js/lib/flowchart.min.js' %}"></script>
            <script src="{% static 'mdeditor/js/lib/jquery.flowchart.min.js' %}"></script>
            <script>
        $(function () {
            editormd.markdownToHTML("content", {
                emoji           : true,
                taskList        : true,
                tex             : true, 
                flowChart       : true,
                sequenceDiagram : true,
            });
            $(".reference-link").each(function (i,obj) {
                console.log(obj)
            })
        })
            </script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
                    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
                    crossorigin="anonymous"></script>
        </div>
    </body>
</html>
```
のようにすることで、Python-Markdownを使わずともプレビュー通りに表示をすることができた。

自己反省としては、ブログ記事等はわかりやすくまとめられているためついつい参照してしまいがちだが、公式のドキュメントやgithubを見たほうが確実な内容が載っているので、甘えずに公式のものを見るようにしたい。