KnowHow

技術的なメモを中心にまとめます。
検索にて調べることができます。

djangoでマークダウンを使うmarkdownx

登録日 ：2024/01/21 06:39
カテゴリ ：python django

markdownxを使うことでpython djangoにてマークダウンが使える。

参考URL)
Djangoで使いたいからPythonでmarkdownをHTML変換する

Quita:Djangoでmarkdown対応のアプリを作った時のメモ

Python-Markdown 3.5.2 documentation

ブログを作成するときに、markdownが使えるのは非常に便利（デザインを簡単に指定できる）

ライブラリのインストール

まずライブラリをインストールする。

pip install django-markdown

CSSでデザインを調整するためにPygmentsをインストールしておく。

pip install Pygments

Djangoに設定を追加

settings.py ファイルに以下のように markdown を追加します。

INSTALLED_APPS = [
    # 他のアプリケーション
    'markdown',
]

DjangoのモデルにMarkdownフィルターを追加します。

ブログの記事モデルやビューでMarkdownを使用する場合、markdown フィルターを使います。models.py の例:

from django.db import models
from markdownx.models import MarkdownxField

class BlogPost(models.Model):
    title = models.CharField(max_length=200)
    content = MarkdownxField()
    # 他のフィールドやメソッド

テンプレート（HTML）でMarkdownフィールドを表示させます。

テンプレートでMarkdownをHTMLに変換して表示するには、safe フィルターを使います。（safeがないと特殊文字でエラーが出るようです）

{{ blog_post.content|markdown|safe }}

さらに、コードや数式に対応させるには、CSSの読み込みや、Markdownxの拡張機能が必要になります。

Prismを追加する

<head>
    <!-- 他の head セクションの要素 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" />
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-core.min.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <!-- 他のプラグインの読み込み -->
</head>

PygmentsでCSSを作成する

monokai スタイルのCSSを生成する方法は以下です。

pygmentize -S monokai -f html -a .highlight > monokai.css

作成したスタイルをDjangoに適用します。

<link rel="stylesheet" href="{% static 'css/monokai.css' %}">

数式に対応

以下のようにスタイルを適用します

  <script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    }
  };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-mml-chtml.js"></script>

settings.pyの設定

settings.pyでDjangoから読み込むMarkdownの拡張機能を指定します。

# add for markdownx
MARKDOWNX_MARKDOWN_EXTENSIONS = [
    'markdown.extensions.extra',
    'markdown.extensions.codehilite',
    'markdown.extensions.tables',
    'markdown.extensions.toc',
    'markdown.extensions.fenced_code',
    'markdown.extensions.abbr',
    'markdown.extensions.attr_list',
    'markdown.extensions.def_list',
    'markdown.extensions.footnotes',
    'markdown.extensions.md_in_html',
    'markdown.extensions.nl2br',
]

戻る