Q&Adjango-mdeditorでmarkdownを適用する
Djangoの勉強を始めました。
試しにブログを作っています。
teratailみたいに記事の編集をmarkdownで行いたいと思いました。
最初はmarkdownxを使用しましたがdjango-mdeitorの方が綺麗に表示できるので変更しました。
このサイトを参考にして実装しています。
管理画面でmarkdownを適用できるようになったのですが、実際にtemplateに表示させると管理画面のように綺麗に表示されません。
↓管理画面(admin)で表示されているもの
↓実際に表示されるもの
試したこと①
参考サイトを参考にして、mdeditorパッケージインストール時に一緒に入ってきたCSSとJavaScriptを読み込ませました。
templateの継承を使用しているので少しわかりにくいですが、記事を表示するのはdetail.htmlでbase.htmlを継承しています。
{% block add_css %}{% endblock %}でcssの追加を行い、
{% block add_js %}{% endblock %}でjsの追加を行なっています。
↓base.html
<!doctype html> {% load static %} <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <title>KYOKIO COMPANY</title> <link rel="stylesheet" media="all" href="{% static "article/css/base.css" %}"> {% block add_css %}{% endblock %} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="{% static "article/js/script.js" %}"></script> <link rel="icon" href="{% static "article/images/favicon.ico" %}"> </head> <body> <header id="header"> <script type="text/javascript"> const hour = new Date().getHours(); if(hour>=4 && hour<=18){ document.write('<img src="{% static "article/images/mainImg01.JPG" %}" alt="">') }else{ document.write('<img src="{% static "article/images/mainImg02.JPG" %}" alt="">') } </script> <div id="slogan"> <h1>kyokio</h1> <h2>めんどくせぇ</h2> </div> </header> <!-- VISION --> <section id="sec01"> <header> <h2>VISION</h2> </header> <div class="vision"> <h2>勉強したことすぐ忘れちゃうからメモっとく.</h2> </div> </section> <!-- // VISION --> <!-- CONTENTS --> <section id="contents_sec"> <header> <h2>CONTENTS</h2> </header> {% block content %}{% endblock %} </section> <footer id="footer"> Copyright(c) 20XX Sample Inc. All Rights Reserved. Design by <a href="" target="_blank">http://---.com</a> </footer> {% block add_markdownCSS %}{% endblock %} </body> </html>
↓detail.html
{% extends "article/base.html" %} {% load static %} {% block add_css %} <link rel="stylesheet" media="all" href="{% static "article/css/detail.css" %}"> <link href="{% static "mdeditor/css/editormd.min.css" %}" rel="stylesheet"> <link href="{% static "mdeditor/css/editormd.preview.css" %}" rel="stylesheet"> {% endblock %} {% block content %} <form method="get" action="{% url 'article:index' %}" class="ui form"> <div class="ui stacked segment"> <div class="field"> <div class="ui input"> <input type="text" name="keyword" placeholder="キーワード" value="{{ keyword|default:'' }}"> </div> </div> <button type="submit" class="ui fluid teal submit button">検索</button> </div> </form> {% if keyword %} <p>{{keyword}}</p> {% else %} <p>keywordなし</p> {% endif %} <p>{{ user.username }}{% if user.is_staff %}→staff{% endif %}</p> <div class="container"> <div class="article_page"> <h2 class='title'>{{ article.title }}</h2> <p class='descriptiom'>{{ article.description }}</p> <p class='contents'>{{ article.formatted_markdown|safe }}</p> {{form.media}} {{form.as_p}} {{ article.media }} {{ article.markdown|safe }} <p class='creat_at'>{{ article.creat_at }}</p> </div> </div> {% endblock %} {% block add_js %} <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> {% endblock %} add_markdownCSS
試したこと②
{% block add_css %}{% endblock %},{% block add_js %}{% endblock %}でjsの追加を行うのではなく直接base.htmlに、mdeditorパッケージインストール時に一緒に入ってきたCSSとJavaScriptを読み込ませましたが反映されませんでした。
参考サイトと違うところ
参考サイトではtemplatetagsにmarkdownにを適応する関数を作成していますが僕は直接models.pyに以下の関数を作っています。
↓models.py
from django.db import models # Create your models here. import markdown as md from mdeditor.fields import MDTextField class Article(models.Model): '''記事クラス''' class Meta(object): db_table = 'article' title = models.CharField(max_length=255) description = models.TextField(blank=True) contents = MDTextField() create_at = models.DateTimeField(auto_now_add=True) is_public = models.BooleanField(default=True) def __str__(self): return str(self.id) + ")" + str(self.title) def markdown(self): return md.markdown(self.contents, extensions=[ 'markdown.extensions.fenced_code', 'markdown.extensions.extra', 'markdown.extensions.codehilite', 'markdown.extensions.toc'] )
templateで{{ article.markdown|safe }}で呼び出しています。
ファイルの構成
. ├── accounts │ ├── __init__.py │ ├── __pycache__ │ │ ├省略 │ ├── admin.py │ ├── apps.py │ ├── forms.py │ ├── migrations │ │ ├省略 │ ├── models.py │ ├── tests.py │ ├── urls.py │ └── views.py ├── article │ ├── __init__.py │ ├── __pycache__ │ │ ├省略 │ ├── admin.py │ ├── apps.py │ ├── migrations │ │ ├省略 │ ├── models.py │ ├── tests.py │ ├── urls.py │ └── views.py ├── config │ ├── __init__.py │ ├── __pycache__ │ │ ├省略 │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── db.sqlite3 ├── manage.py ├── media │ └── markdownx │ └── f736367b-fc8f-490f-8d13-b915b8cc81ee.jpg ├── references │ ├── markdown │ │ ├── markdownx.txt │ │ └── mdeditor.txt │ └── static.txt ├── static │ └── article │ ├── css │ │ ├── base.css │ │ ├── detail.css │ │ └── index.css │ ├── images │ │ ├── bgSec04.jpg │ │ ├── circleImg01.png │ │ ├── circleImg02.png │ │ ├── circleImg03.png │ │ ├── favicon.ico │ │ ├── mainImg01.JPG │ │ ├── mainImg02.JPG │ │ ├── no-image.jpg │ │ ├── sec02_01.jpg │ │ └── sec02_02.jpg │ └── js │ └── script.js └── templates ├── accounts │ ├── login.html │ └── register.html └── article ├── base.html ├── detail.html └── index.html
補足情報（FW/ツールのバージョンなど）
OS: macOS BigSur 11.2.1
Python: Python 3.7.7
Django: Django2.2.6
mdeditor: django-mdeditor0.1.18
Markdown: Markdown3.1.1
回答1件
0
自己解決
自己解決できました。
以下が解決方法です。
追加したjsの部分でタグのidを取得しているので、そこを変更したらいけました
<div class="container"> <div class="article_page"> <h2 class='title'>{{ article.title }}</h2> <p class='descriptiom'>{{ article.description }}</p> <p class='contents'>{{ article.formatted_markdown|safe }}</p> <div id='content'>{{ article.markdown|safe }}</div> <p class='creat_at'>{{ article.creat_at }}</p> </div> </div> {% endblock %} {% block add_js %} <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 () { # ↓ここに変えたい場所のタグのIDを指定 editormd.markdownToHTML("content", { emoji : true, taskList : true, tex : true, flowChart : true, sequenceDiagram : true, }); $(".reference-link").each(function (i,obj) { console.log(obj) }) }) </script> {% endblock %} add_markdownCSS
投稿2021/03/01 13:58
総合スコア560
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。