转载

django1.8下的markdown、highlight、pagedown解决

写作说明

在看完python3的基本与法后，为了巩固自己对语言的掌握就使用django1.8写了个人博客的小程序。在对博客文章进行markdown处理的时候遇到了几个问题，希望这片文章能够帮助到其他人。

markdown

markdown是一个很多程序员都喜欢的标记性语言，很多知名博客和网站都支持采用了这一编辑器。

例如：segmentfault、简书、当然还有锤子的便签。为了在django1.8中对自己的文章进行markdown

，可以使用以下几个步骤：

 #首先安装markdown2 pip3 install markdown2

接下来我们在应用的文件夹下新建文件夹templatetags，再在templatetags下新建两个文件：__init___.py、custom_markdown.py 两个文件。在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"]))

现在templatetags文件夹就相当于你自己的一个包了。它的使用很简单，在需要的网页中引入custom_markdown，然后在需要进行markdown的地方markdown就行了，如下：

 {% extends "base.html" %} {% load custom_markdown %} {% block content %} <div class="posts">   <section class="post">    <header class="post-header">     <h2 class="post-title">{{ post.title }}</h2>      <p class="post-meta">       Time:  <a class="post-author" href="#">{{ post.date_time|date:'Y /m /d'}}</a> <a class="post-category post-category-js" href="{% url 'search_tag' tag=post.category %}">{{ post.category }}</a>      </p>    </header>     <div class="post-description">      <p>       {{ post.content|custom_markdown }}      </p>     </div>   </section>   {% include "duoshuo.html" %} </div> <!-- /.blog-post --> {% endblock %}

highlight.js 高亮代码

完成上面的内容markdown后，还不能达到大部人的预期效果，因为代码快部分没有高亮显示。接下来我们来对代码块进行处理。

highlight.js支持非常多语言的高亮，而且高亮的风格也非常丰富，我们先去官网根据自己的选择的语言下载下来，然后放入static文件夹

下，然后我们在基模版中如下使用就能实现高亮了：

 <!DOCTYPE html> {% load staticfiles %} <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>{% block title %}{% endblock %}</title>   <!-- Bootstrap core CSS -->  <link rel="stylesheet" href="{% static 'bootstrap-3.3.5/css/bootstrap.css' %}" >  <link rel="stylesheet" href="{% static 'blog_css/my_blog.css' %}">  <script src="{% static 'bootstrap-3.3.5/js/bootstrap.js' %}"></script>  <script src="{% static 'jquery-2.1.4.min.js' %}"></script>  <!-- jqcloud -->  <script src="{% static 'jqcloud/jqcloud-1.0.4.js'%}"></script>  <link rel="stylesheet" type="text/css" href="{% static 'jqcloud/jqcloud.css' %}">  <script src="{% static 'highlight/highlight.pack.js' %}"></script>  <link rel="stylesheet" type="text/css" href="{% static 'highlight/styles/monokai.css' %}">  <!--返回顶部-->  <script src="{% static 'scrollup/jquery.scrollUp.js' %}"></script> </head> <script>hljs.initHighlightingOnLoad();</script> ......

最终的显示效果如下：

django1.8下的markdown、highlight、pagedown解决

pagedown编辑器

完成前面的两步后我们，可能还需要在后台的文章编辑部分使用markdown的编辑器，这里我使用的是django-pagedown编辑器。django-pagedown完美支持markdown语法，还能边写边预览，如果你觉得原生的界面比较丑的化还可以自己重写css。

#安装django-pagedown pip3 install django-pagedown

安装好后，我们需要在settings.py中加入应用才能使用：

 INSTALLED_APPS = ( 'bootstrap_admin', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'Article', 'pagedown',

)

接下来在admin.py中加入如下代码（官方的步骤不适用于django1.8，会报错）：

 from django.contrib import admin from .models import Author,Tag,Classification,Article from pagedown.widgets import AdminPagedownWidget from django import forms # Register your models here. # 定义自己的form class ArticleForm(forms.ModelForm):  content = forms.CharField(widget=AdminPagedownWidget())  class Meta:   model = Article   fields = '__all__' class ArticleAdmin(admin.ModelAdmin):  form = ArticleForm admin.site.register(Author) admin.site.register(Tag) admin.site.register(Classification) #注册的时候绑定 admin.site.register(Article,ArticleAdmin)

然后后台的效果图如下：