使用markdown及highlight

一、markdown

  1. 安装markdown2

    pip install markdown2
  2. 应用markdown2

    进入blog APP,创建templatetags文件夹,在文件夹内创建__init__.py,custom_markdown.py

  3. 修改custom_markdown.py

    import markdown2
    from django import template
    from django.template.defaultfilters import stringfilter
    from django.utils.encoding import force_unicode
    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_unicode(value),
                                    extras=['code-friendly',
                                    'fenced-code-blocks']
                                    ))
  4. 在模板中添加markdown:

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

    现在我们可以使用markdown的语法了,如果需要代码高亮,我们需要使用highlight.js

二、代码高亮

  1. 下载highlight.js

    官网地址https://highlightjs.org/,选择你需要的语言,下载即可。

  2. 使用highlight.js

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

    现在浏览,代码可以高亮显示了。

三、后台添加markdown功能,可以用pagedown

  1. 安装pagedown

    pip install django-pagedown 
  2. 修改setting.py,添加应用

    INSTALLED_APPS = (
        ...
        'pagedown',
    )
  3. 设置form.py

    from django import forms
    from pagedown.widgets import AdminPagedownWidget
    from models import Article
    
    class ArticleForm(forms.ModelForm):
       content = forms.CharField(widget=AdminPagedownWidget(), required=False,
       label='')
    
    class Meta:
        model = Article
        fields = '__all__'
  4. 设置admin.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了

posted on 2016-03-26 15:59 神秘代码 阅读(...) 评论(...) 编辑 收藏

导航

公告