django中实现Markdown-526互联

分为两个部分：

------------后台使用Markdown编辑

------------前端使用Markdown展示

准备工作：

pip install django-mdeditor  # 用于后台编辑
pip install markdown # 用于前端显示

INSTALLED_APPS = [
    ... 省略 ...
    'mdeditor',
]

path("mdeditor/", include('mdeditor.urls'))

第一部分：实现后台使用Markdown编辑

修改models中的field的类型，之前是TextField，现在改成MDTextField即可

from django.db import models
from mdeditor.fields import MDTextField

# 文章表
class Article(models.Model):
    # 文章标题title
    title = models.CharField(max_length=64, verbose_name='标题')

    # 文章内容content
    content = MDTextField(default="", editable=True, blank=True)

    article_picture = models.ImageField(upload_to='img/', verbose_name='封面图')

此时就实现了后台使用Markdown编辑了，如下：

第二部分：实现前端使用Markdown显示

例如，实现文章的详情显示：

原本的操作是，从数据库拿到这篇文章后，直接传递到前端页面进行展示。

其实现在也一样，只不过此时，是把文章内容的HTML标签传递到前端页面中，然后在渲染的时候加上{{ xxx|safe}}就可以了。【如果不加safe的话，会直接显示HTML标签】

如下：

import markdown
from django.shortcuts import render
from app01.models import Article


def detail(request):

    # 拿到文章的id
    articleId = request.GET.get('articleId')

    # 拿到这篇文章
    articleDetail = Article.objects.get(id=articleId)

    # 之前是直接传递这篇文章articleDetail就可以了；
    # 而现在先把文章内容articleDetail.content转换成Markdown的HTML标签再传递
    articleDetail.content = markdown.markdown(
        articleDetail.content,
        extensions = [
            'markdown.extensions.extra',
            'markdown.extensions.codehilite',
            'markdown.extensions.toc',
            'markdown.extensions.abbr',
            'markdown.extensions.attr_list',
            'markdown.extensions.def_list',
            'markdown.extensions.fenced_code',
            'markdown.extensions.footnotes',
            'markdown.extensions.md_in_html',
            'markdown.extensions.tables',
            'markdown.extensions.admonition',
            'markdown.extensions.legacy_attrs',
            'markdown.extensions.legacy_em',
            'markdown.extensions.meta',
            'markdown.extensions.nl2br',
            'markdown.extensions.sane_lists',
            'markdown.extensions.smarty',
            'markdown.extensions.toc',
            'markdown.extensions.wikilinks'
        ]
    )
    return render(request, 'detail.html', locals())

然后在页面渲染的时候加上safe就可以了：

{{ articleDetail.content|safe }}

此时，就可以显示Markdown内容了，但是还是没有代码的语法高亮：

那怎么实现代码高亮呢？

　　首先，需要安装一下依赖：

　　pip install Pygments

　　然后执行：

　　pygmentize -S monokai -f html -a .codehilite > monokai.css

执行完成后，会生成一个CSS文件：monokai.css，然后把这个CSS文件引入到对应的HTML文件中就可以了，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>articleDetail</title>
    <link rel="stylesheet" href="/static/monokai.css">
    <style>
        div{
            width: 1000px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>
        <h2>{{ articleDetail.title }}</h2>
        <p>{{ articleDetail.content|safe }}</p>
    </div>
</body>
</html>