分为两个部分:
------------后台使用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】,只是其中一个主题而已,还可以换成其他的主题,例如:
# pygmentize -S default -f html -a .codehilite > markdown_highlighy.css
# pygmentize -S default -f html -a .codehilite > default.css
... ...
标签:Markdown,实现,html,django,content,markdown,articleDetail,extensions From: https://www.cnblogs.com/zhangyh-blog/p/17891154.html