Django: markdownの表示方法

実現したいこと

mdeditorを使用してMarkdownを記述して、記述したmarkdownをmarkdown形式で表示したいです。
どなたかご教授頂けると幸いです。

理想

現実

現在の階層構造

このcss/mdeditorのmdeditorフォルダは、ここの全てを入れてます。

該当のソースコード

HTML
1{% load markdown_extras %}
2{% load static %}
3
4<!doctype html>
5<html>
6    <head>
7        <link href="{% static 'mdeditor/css/editormd.min.css' %}" rel="stylesheet">
8        <link href="{% static 'mdeditor/css/editormd.preview.css' %}" rel="stylesheet">
9    </head>
10
11    <body>
12        {{ post.contents|markdown|safe }}
13    </body>
14    <script src="{% static 'mdeditor/js/jquery.min.js' %}"></script>
15    <script src="{% static 'mdeditor/js/editormd.min.js' %}"></script>
16    <script src="{% static 'mdeditor/js/lib/marked.min.js' %}"></script>
17    <script src="{% static 'mdeditor/js/lib/prettify.min.js' %}"></script>
18    <script src="{% static 'mdeditor/js/lib/raphael.min.js' %}"></script>
19    <script src="{% static 'mdeditor/js/lib/underscore.min.js' %}"></script>
20    <script src="{% static 'mdeditor/js/lib/sequence-diagram.min.js' %}"></script>
21    <script src="{% static 'mdeditor/js/lib/flowchart.min.js' %}"></script>
22    <script src="{% static 'mdeditor/js/lib/jquery.flowchart.min.js' %}"></script>
23    <script>
24    $(function () {
25        editormd.markdownToHTML("content", {
26            emoji           : true,
27            taskList        : true,
28            tex             : true, 
29            flowChart       : true,
30            sequenceDiagram : true,
31        });
32        $(".reference-link").each(function (i,obj) {
33        console.log(obj)
34        })
35    })
36    </script>
37</html>

markdown_extras
1from django import template
2from django.template.defaultfilters import stringfilter
3 
4import markdown as md
5 
6register = template.Library()
7 
8@register.filter()
9@stringfilter
10def markdown(value):
11    return md.markdown(value, extensions=['markdown.extensions.fenced_code'])
12

参考にしたサイト

この通りに進めてます。

行動規範の内容に同意します

回答1件

ベストアンサー

回答依頼ありがとうございます。
参考にされてる記事に記述はないですが、確かカスタムタグを使う場合はsetting.pyに追記が必要です。

python
1TEMPLATES = [
2    {
3        'OPTIONS': {
4            'context_processors': [
5            ],
6            'builtins': [
7            ],
8            'libraries': { #これがなかった場合は追記
9                'markdown_extras': '(アプリ名).templatetags.markdown_extras', #追記
10            }
11        },
12    },
13]

一度これを試してみてください。
よろしくお願いします。

投稿2020/03/25 11:16

llr114

総合スコア203

退会済みユーザー

2020/03/26 05:16

回答の程、ありがとうございます。カスタムタグを使用する場合にsetting.pyに追記が必要だったとは知りませんでした。追記させて頂きましたが、変更がされませんでした。

llr114

2020/03/26 05:48

あ、勘違いしてたかもしれません。参考にされているサイトの、 Markdownで編集したコンテンツをtemplateへhtmlで表示させるは問題なく完了していて、 mdeditorプレビューのスタイリングをフロントにも適用する方法ができていない、ということでしょうか？

退会済みユーザー

2020/03/26 06:39

いえ、templateへhtmlで表示させることが出来てないのです。分かりづらくて申し訳ございません。

退会済みユーザー

2020/03/26 06:40

mdeditorプレビューをhtmlで表示したいのです。

llr114

2020/03/26 07:03

そうすると、マークダウンの表示はできている気がします。具体的に、どの文字列ができていないんでしょうか？参考にされているサイトを見る限り、質問に表示してある理想、の形は mdeditorプレビューのスタイリングをフロントにも適用する方法を実施した後に出来上がるものだと思います。

退会済みユーザー

2020/03/26 07:31

mdeditorプレビューがそのままHTMLに表示されると思っていたのですが、そうではないということでしょうか？

退会済みユーザー

2020/03/26 07:32

個人的には、引用、コードや表がプレビューのように表示されることを期待していました。

退会済みユーザー

2020/03/26 07:35

https://yuki.world/django-markdown-implement/ の mdeditorプレビューのスタイリングをフロントにも適用する方法をすればその上に貼り付けられている写真のように表示可能だと思ったのですが...

llr114

2020/03/28 18:16

「個人的には、引用、コードや表がプレビューのように表示されることを期待していました。」 →これを行うには、参考サイトの mdeditorプレビューのスタイリングをフロントにも適用する方法をすればいけるはずです。「いえ、templateへhtmlで表示させることが出来てないのです。」とコメントでおっしゃっていたので、その前段階（Markdownで編集したコンテンツをtemplateへhtmlで表示させる）で止まっていると思っていたのですが、認識が違いますでしょうか？

退会済みユーザー

2020/04/01 03:30

返信が遅くなり申し訳ございません。以下のように記述することに解決可能です。 <div> <div id="content">{{ post.contents|markdown|safe }}</div> </div>

退会済みユーザー

2020/04/01 03:32

ご協力頂きありがとうございます。

行動規範の内容に同意します