【django】ブログのチュートリアルを構築する(3)——markdownおよびhighlight

一.作業環境
ubuntu14.04
python2.7 + django1.8
二.markdown君の文章
1.markdown 2のインストール

#    markdown2
pip install markdown2

2.markdown 2の適用
a.アプリケーションのディレクトリに入り、次の操作を行います.

$ mkdir templatetags
$ touch __init__.py
$ touch custom_markdown.py

b.custom_を修正するmarkdown.py:

import markdown2 
from django import template 
from django.template.defaultfilters import stringfilter 
from django.utils.encoding import force_text 
from django.utils.safestring import mark_safe

register = template.Library()

@register.filter(is_safe=True)
@stringfilter

def custom_markdown(value):
    return mark_safe(markdown2.markdown(force_text(value), extras=["fenced-code-blocks", "cuddled-lists", "metadata", "tables", "spoiler"]))

c.テンプレートにmarkdownを追加する:

{% extends "base.html" %} {% load custom_markdown %} {% block content %} …… <p> {{ post.content|custom_markdown }} </p> …… {% endblock %}

これで、markdownの文法を使うことができます～
しかし、コードのハイライト機能はまだありません.自分で追加する必要があります.ここではhighlightを使用します.js:
3.コードハイライトを追加
私たちにはhtmlのヘッダ追加:

<link rel="stylesheet" href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css">

<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

ここでcdnを直接使うのは便利です.もちろん、自分で公式サイトに行ってローカルにダウンロードすることもできます.
三.バックグラウンドにmarkdown機能とプレビューを追加
1.pagedownのインストール

pip install django-pagedown 

2.setting.の修正py、アプリケーションの追加

INSTALLED_APPS = (
...
'pagedown',
...
) 

3.formを設定する.py
エディタが必要なformで設定します.データベーステーブルArticleを例にとると、我々のBlogのaapではmodelsでArticleテーブルが定義されています.
formsを作成する.py、次のように追加します.

from models import Article
from pagedown.widgets import AdminPagedownWidget
from django import forms

class ArticleForm(forms.ModelForm):
    content = forms.CharField(widget=AdminPagedownWidget())

    class Meta:
        model = Article

4.adminを設定する.py
修正pyは次のとおりです.

from django.contrib import admin
from blog.models import Article
from forms import ArticleForm
 class ArticleAdmin(admin.ModelAdmin): form = ArticleForm admin.site.register(Article, ArticleAdmin)

これで、楽屋に行くとmarkdownのプレビューが见えます～～