Django2.1整合markdown编辑器并实现代码高亮

测试环境
python:3.6.0
Anaconda:4.3.0
os:win10
django:2.1.4

参考：https://blog.csdn.net/duke10/article/details/81033686

使用Django搭建的个人博客主页：http://whutlcy.cn/Blog/

Django整合django-mdeditor

1.安装django-mdeditor

pip install django-mdeditor

2.在项目的settings.py的INSTALLED_APPS中添加’mdeditor’

INSTALLED_APPS = [
    'Blog',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'mdeditor',    #富文本编辑器
]

3.添加路径到设置中

#settings.py
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')  #uploads必须存在，且在项目目录下
MEDIA_URL = '/media/'   #你上传的文件和图片会默认存在/uploads/editor下

4.添加设置到url中

#urls.py
from django.conf.urls import url,include
from django.conf.urls.static import static
from django.conf import settings
from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('Blog/',include('Blog.urls')),
    path('admin/', admin.site.urls),
    url(r'mdeditor/',include('mdeditor.urls')),
]

if settings.DEBUG:
   #static files (images,css,javascript, etc.)
   urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

5.在app中使用

from django.db import models
from mdeditor.fields import MDTextField   #必须导入
class Article(models.Model):
    article_title = models.CharField('title',max_length = 100)
    article_content = MDTextField('content')   #注意为MDTextField()
    article_pubdate = models.DateTimeField('date published')
    article_publisher = models.ForeignKey(User,on_delete=models.CASCADE,verbose_name='publisher')
    article_class = models.ForeignKey(Class,null=True,blank=True,on_delete=models.CASCADE,verbose_name='class')
    def __str__(self):
        return self.article_title

6.在Blog/admin.py中注册

from django.contrib import admin
from Blog.models import *
admin.site.register(Article)

7.此时在Django的后台管理页面添加或编辑该类时，article_content就可以用markdown编辑并实时预览了。

Django前端显示markdown

1.首先下载markdown

pip install markdown    # 下载时最好使用管理员权限

2.在views.py中使用:

注意这里使用了3个markdown扩展，extra 本身包含很多拓展，而 codehilite 是语法高亮拓展，这为我们后面的实现代码高亮功能提供基础，而 toc 则允许我们自动生成目录。
前端可能不会为代码换行，为了解决这个问题使用article.content.replace(“\r\n”, ’ \n’）解决，把换行符替换成两个空格+换行符，这样经过markdown转换后才可以转成前端的br标签

from django.shortcuts import render,get_object_or_404
from .models import Article
import markdown
# 文章详情页
def detail(request,article_id):
    article = get_object_or_404(Article,pk=article_id)
    article.article_content = markdown.markdown(article.article_content.replace("\r\n", '  \n'),
                        extensions=['markdown.extensions.extra',
                                     'markdown.extensions.codehilite',
                                     'markdown.extensions.toc',],safe_mode=True,enable_attributes=False)
    context = {
        'article':article,
    }
    return render(request,'Blog/detail.html',context)

3.前端显示时必须使用safe过滤器

<div>
	{{article.article_content | safe}}
</div>

4.实现代码高亮
首先安装Pygments

pip install Pygments

安装完成后运行：

pygmentize -S default -f html -a .codehilite > code.css

该命令会在命令路径下生成.css文件,code.css还可以换成github.css等。将该css文件放到应用的静态文件夹中。
最后在html页面引入：

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

5.现在刷新前端页面，文章内容便以markdown形式展示了。