django中实现Markdown
分为两个部分：
------------后台使用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>
到此，就全部完成了！
附言：
1. 下面的这些内容是一些扩展，具体可以根据实际情况选择，这些是从 markdown 的官网扩展官网 https://python-markdown.github.io/extensions/查到的
2. 刚才执行的这条命令【pygmentize -S monokai -f html -a .codehilite > monokai.css】，只是其中一个主题而已，还可以换成其他的主题，例如：
浙公网安备 33010602011771号