分为两个部分：

------------后台使用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

... ...

django中实现Markdown的更多相关文章

  1. Django 中使用 MarkDown 插件

    目录 Django 使用 markdown 插件 1 将 markdown 转化为 html 2 使用 markdown 编辑框 Django 使用 markdown 插件 Python-Markdo ...

  2. django 项目中使用markdown编辑器

     第一步: 修改models.py文件下要显示字段的类型为TextField 第二步:运行命令: python manage.py makemigrations 和 python manage.py ...

  3. 异步任务队列Celery在Django中的使用

    前段时间在Django Web平台开发中,碰到一些请求执行的任务时间较长(几分钟),为了加快用户的响应时间,因此决定采用异步任务的方式在后台执行这些任务.在同事的指引下接触了Celery这个异步任务队 ...

  4. Mysql事务探索及其在Django中的实践（二）

    继上一篇<Mysql事务探索及其在Django中的实践(一)>交代完问题的背景和Mysql事务基础后,这一篇主要想介绍一下事务在Django中的使用以及实际应用给我们带来的效率提升. 首先 ...

  5. Mysql事务探索及其在Django中的实践（一）

    前言 很早就有想开始写博客的想法,一方面是对自己近期所学知识的一些总结.沉淀,方便以后对过去的知识进行梳理.追溯,一方面也希望能通过博客来认识更多相同技术圈的朋友.所幸近期通过了博客园的申请,那么今天 ...

  6. Django 中url补充以及模板继承

    Django中的URL补充 默认值 在url写路由关系的时候可以传递默认参数,如下: url(r'^index/', views.index,{"name":"root& ...

  7. django中css问题

    django中加载的css,js,图片其中js和图片可以加载出来,而css没有效果.原因如下: 这是因为你安装的某些IDE 或者其他更改了注册表导致的系统的注册表\HKEY_CLASSES_ROOT\ ...

  8. 在Django中进行注册用户的邮件确认

    之前利用Flask写博客时(http://hbnnlove.sinaapp.com),我对注册模块的逻辑设计很简单,就是用户填写注册表单,然后提交,数据库会更新User表中的数据,字段主要有用户名,哈 ...

  9. django中tinymce添加图片上传功能

    主要参考以下: https://pixabay.com/en/blog/posts/direct-image-uploads-in-tinymce-4-42/ http://blog.csdn.net ...

  10. django中migration文件是干啥的

    昨天很蠢的问leader git push的时候会不会把本地的数据库文件上传上去,意思是django中那些migration文件修改之后会不会上传. 然后得知不会,因为所有的数据库都存在本机的mysq ...

随机推荐

  1. vc修改ocx控件classID

    背景: 客户希望,classID 为客户自已定义好的一个 ID ,由于我们自动生成的 classID 和客户定义的 ID 不同,所以我们需要修改 classID 为客户指定的 ID 解决方法: 1.打 ...

  2. Qt 操作注册表

    一.写入注册表 #include <QSettings> //实例 QSettings //参数 1:注册表位置 //参数 2:操作 windows 注册表 QSettings::Nati ...

  3. 开源数据库OpenGauss的SQL解析源码分析

    开源数据库 OpenGauss 的 SQL 解析源码分析 OpenGauss 数据库体系概述 openGauss 是关系型数据库,采用客户端/服务器,单进程多线程架构:支持单机和一主多备部署方式,同时 ...

  4. 通过path在windows下临时修改python和pip路径 以便于配置环境只对当前命令行窗口生效

    配置前 在cmd命令行下输入新env的路径 path=D:\Miniconda2\envs\openmmlab\openmmlab;D:\Miniconda2\envs\openmmlab\openm ...

  5. 码力全开！请查收HDC.Together 2023亮点日程

    <主题演讲> <技术交流与互动> <妙趣之旅>

  6. Python根据主播直播时间段判定订单销售额归属

    写在前面:最近在群里看到一个这样的直播电商的场景觉得还是挺有趣的,于是就想用Python来实现. 需求描述:根据主播直播时间段结合销售订单的付款时间判断所属销售的归属 生成主播在线直播时间段数据 fr ...

  7. PIL.Image, numpy, tensor, cv2 之间的互转，以及在cv2在图片上画各种形状的线

    ''' PIL.Image, numpy, tensor, cv2 之间的互转 ''' import cv2 import torch from PIL import Image import num ...

  8. 手机配置IPV6

    据可靠消息说今年7月份前大部分系统都得支持ipv6,之前也没当回事,突然说要全切,还得验证ipv6的支持情况. 网上找了一堆,发现都过时了,或者行不通,琢磨了一下把华为android的搞定了(流量模式 ...

  9. vue中img标签图片 加载时 与 加载失败 的处理方法

    开发过程中经常需要和图片处理打交道,看了网上很多有关图片处理的方法,都是讲解得一知半解,没有比较全面的总结.下面,将简单总结一个我们通过vue去处理img标签过程中,图片加载时,与图片加载失败时的处理 ...

  10. 阿里云2020上云采购季，你的ECS买好了吗？

    阿里云2020上云采购季,超级品类日,天天有爆款. 今日爆款推荐:云服务器. 重磅推荐两款,限时抢购. 新品共享型s6: 企业级共享型n4: 想看更多云产品,来阿里云采购季: https://www. ...