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

はじめに

Djangoを使ってMarkdown対応の簡単なメモアプリを作った時の記録です．実現したかったのはこの2点です．

• Markdown形式で記述した内容をHTMLに変換して表示したい．
• メインはサンプルコードのメモに使いたいので，コードはシンタックスハイライトできれいに表示したい．

完成イメージはこのような感じです．

開発環境

Webアプリ自体はPythonが得意なこともありDjangoを使いました．

• Python: 3.6.2
• Django: 1.11.5

MarkdownからHTMLへの変換

Markdownの変換はPython-Markdownを使用しました．pipでインストールします．

$ pip install markdown

変換は以下のようなイメージで簡単に行えます．

import markdown
markdown.markdown('# spam')    # <h1>spam</h1>

Djangoのテンプレートで使う

HTMLへの変換処理はDjangoのテンプレート内で処理できたほうが便利なので，自作のフィルタを用意します．
このあたりを参考に実装します．

templatetagsディレクトリを用意して，その中で自作フィルタを実装します．今回は例としてmyfilter.pyとしています．

app/
    __init__.py
    models.py
    templatetags/
        __init__.py
        myfilter.py
    views.py

myfilter.py

from django import template
from django.template.defaultfilters import stringfilter
import markdown

register = template.Library()

@register.filter
@stringfilter
def markdown2html(value):
    return markdown.markdown(value)

テンプレート内でmyfilterをロードして使用します．markdowntxtとしているのがMarkdown形式でのテキストが入った変数です．

{% load myfilter %}
:
<div id="memo">
    {{ markdowntxt | markdown2html | safe }}
</div>
:

safeフィルタはHTML の自動エスケープへの対策です．これを使わないとmarkdown2htmlの結果の文字列に対して，例えば<が<と変換されてしまいます．

コードのシンタックスハイライト

シンタックスハイライトにはhighlight.jsを利用しました．導入が簡単だったことと対応言語とテーマがとてもたくさんそろっていたことがポイントです．冒頭にのせたイメージはDraculaテーマを使っています．

<link rel="stylesheet" href="/path/to/styles/dracula.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

シンタックスハイライトをよりきれいに表示するために，プログラミング言語の指定ができるようにこのあたりを参考にしてDjango側のコードを少し更新します．

myfilter.py

def markdown2html(value):
-   return markdown.markdown(value)
+   return markdown.markdown(value, ['fenced_code'])

これでGitHubやQiitaでおなじみの書き方で，コードブロックの言語の指定が行えます．

```python
# python code
```

<pre><code class="python"># python code
</code></pre>

highlight.jsで指定可能な言語はこちらを参考にしてください．また，highlight.jsをダウンロードするときに対応させる言語にチェックを入れておく必要があります．

おわりに

Python-Markdownとhighlight.jsを使ってお手軽にMarkdownを取り扱うことができました．