django-markdown使用（前后端显示）含详细代码流程

• Django整合django-mdeditor后端使用

1. 安装django-mdeditor

pip install django-mdeditor

2. 项目setting文件添加app

INSTALLED_APPS = [
   '....'
    'mdeditor'
]

3. 添加保存markdown中图片路径

MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')  #新建一个uploads文件夹，且在项目目录下
MEDIA_URL = '/media/'   #你上传的文件和图片会默认存在/uploads/editor下 这一步不用创建任何文件夹

4. 添加markdown到你的url中(项目的urls文件),并且添加图片路径

urlpatterns = [
   '...'
    url(r'mdeditor/', include('mdeditor.urls')),
]
from django.conf import settings
from django.conf.urls.static import static
#没有这一步 你添加的图片并不会显示出来
if settings.DEBUG:
    # static files (images, css, javascript, etc.)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

5. 在应用的模型类中使用markdown，让其编辑内容使用markdown

from django.db import models
from mdeditor.fields import MDTextField
class Blog(models.Model):
    title = models.CharField(max_length=50)
    content =MDTextField()#使用markdown

以上已经完成了在后端界面admin中使用markdown
下面我们讲如何在前端界面展现出markdown的效果

• 前端展现markdown效果

1. 安装两个包

pip install markdown#view视图中获取到数据库的数据，修饰为html语句，传到前端
pip install Pygments #实现代码高亮
安装第二个包后还要执行
pygmentize -S default -f html -a .codehilite > code.css
在文件夹下会发现生成了code.css文件，将这个css文件加入到你的static文件夹下css里面(路径自己定，只要用的时候引入正确就行了)
最后一步在需要高亮的html文件里面导入刚刚生成的css文件，例如我的是->要在
<link rel="stylesheet" type="text/css" href="{% static 'css/code.css' %}">  {#语法高亮#}

2.视图中获取数据库信息

import markdown
from .models import *
def blog_detail(request, pk):
    context = {}
    blog = Blog.objects.get()
    blog.content=markdown.markdown(blog.content,extensions=[
        'markdown.extensions.extra',
        'markdown.extensions.codehilite',#语法高亮拓展
        'markdown.extensions.toc'#自动生成目录
    ])#修改blog.content内容为html
    context['blog'] = blog
    return render(request, 'blog/blog_detail.html', context)

3. 换行问题
   markdown的换行问题，在前端界面换行显示有问题，并没有br标签，这是因为在markdown语法中两个空格加一个换行才是换行，或者两个换行才是一个换行可使用article.content.replace(“\r\n”, ’ \n’）解决，把换行符替换成两个空格+换行符，这样经过markdown转换后才可以转成前端的br标签

 blog.content=markdown.markdown(blog.content.replace("\r\n",' \n'),extensions=[
        'markdown.extensions.extra',
        'markdown.extensions.codehilite',
        'markdown.extensions.toc'
    ])

4. 前端显示时必须使用safe过滤器->否则不会显示

 <div class="blog-context">{{ blog.content|safe }}</div>