【Django】Markdownをプレビュー通りにHTML反映させる

はじめまして、こちらはDjangoアプリ開発の際に躓いた点を備忘録として残しております。
今回はMarkdown形式での記事投稿を実装の際、少し悩んだ点を書き記します。

実装の際に参照したサイト

実装の際、下記サイトを参考に進めていきました。いやはや本当に有難いです。

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

基本的に上記サイトの手順通りに進めていったのですが、初歩的な点に気付かず、小一時間悩み続けました。。。

悩んだところ

上記サイトの項目『mdeditorリアルタイムプレビュー通りのスタイリングでフロント表示する』になります。

まずは記事通り、テンプレートのhead要素内に下記コードを記述しました(自分の場合はbase.htmlに書きました)。

base.html

  <link href="{% static 'mdeditor/css/editormd.min.css' %}" rel="stylesheet">
  <link href="{% static 'mdeditor/css/editormd.preview.css' %}" rel="stylesheet">

そしてお次はbody要素の最後に下記コードを記述。こちらも記事通りですが、ここで躓いた点があります。

base.html

  <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>

上記コードに『躓いた点』と書いた行ですが、"content"はテンプレート内のid属性を参照していることに気付きませんでした。

自分の場合、下記テンプレート内の本文をプレビュー通りに反映させたかったため、ブログ詳細『detail.html』の下記コードにid属性『content』を付与しました。

detail.html

<div id="content">{{object.content|markdown|safe}}</div>

これで本文にMarkdownが適用されるようになりました。
今後も何かありましたら、備忘録として残していこうと思います。