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

章嘉致
2023-12-01
  • Django整合django-mdeditor后端使用
  1. 安装django-mdeditor
pip install django-mdeditor
  1. 项目setting文件添加app
INSTALLED_APPS = [
   '....'
    'mdeditor'
]
  1. 添加保存markdown中图片路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')  #新建一个uploads文件夹,且在项目目录下
MEDIA_URL = '/media/'   #你上传的文件和图片会默认存在/uploads/editor下 这一步不用创建任何文件夹
  1. 添加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)

  1. 在应用的模型类中使用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)
  1. 换行问题
    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'
    ])
  1. 前端显示时必须使用safe过滤器->否则不会显示
 <div class="blog-context">{{ blog.content|safe }}</div>
 类似资料: