分为两个部分：

------------后台使用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. loguru 简单使用

    使用Python自带的 logging 来记录日志会比较麻烦,查了下 大家都在用 loguru,看了下文档,发现是挺好用的,记录下笔记 安装 pip install loguru     简单使用 f ...

  2. 实例讲解昇腾 CANN YOLOV8 和 YOLOV9 适配

    本文分享自华为云社区<昇腾 CANN YOLOV8 和 YOLOV9 适配>,作者:jackwangcumt. 1 概述 华为昇腾 CANN YOLOV8 推理示例 C++样例 , 是基于 ...

  3. 记一次 Go 调用系统命令出现的问题分析

    首先在程序中封装了下面一个函数用来执行系统命令: // 执行系统命令 func executeCommand(command string, output, outerr io.Writer) err ...

  4. 鸿蒙HarmonyOS实战-ArkUI动画（弹簧曲线动画）

    前言 弹簧曲线动画是一种模拟弹簧运动的动画效果,通过改变弹簧的拉伸或压缩来表现不同的运动状态.以下是制作弹簧曲线动画的步骤: 创建一个弹簧的模型,可以使用圆形或者曲线来代表弹簧的形状. 将弹簧固定在一 ...

  5. 力扣344(java & python)-反转字符串（简单）

    题目: 编写一个函数,其作用是将输入的字符串反转过来.输入字符串以字符数组 s 的形式给出. 不要给另外的数组分配额外的空间,你必须原地修改输入数组.使用 O(1) 的额外空间解决这一问题. 示例 1 ...

  6. 阿里巴巴超大规模Kubernetes基础设施运维体系揭秘

    ​简介:ASI:Alibaba Serverless infrastructure,阿里巴巴针对云原生应用设计的统一基础设施.ASI 基于阿里云公共云容器服务 ACK之上,支撑集团应用云原生化和云产品 ...

  7. [Blockchain] 去中心化与互联网分布式的联系与区别

    去中心化和传统分布式都是多机应用,这是它们的共同之处,但是背后有着不一样的用途. 我们所理解的传统分布式及其应用可以解决两个问题:冗余备份/扩容 和 并行计算. 而去中心化应用的目的是维护不可逆转数据 ...

  8. PostMan测试图片上传接口的方法

    一.选择POST后添加接口地址 二.选择Body下的from-data 注:Headers不要加参数 三.填写key,再key后的下拉选择file,然后选择文件 注:key并不是图片名称,而是接口接收 ...

  9. 优秀的 RocketMQ 可视化管理工具 GUI 客户端

    优秀的 RocketMQ 可视化管理工具 GUI 客户端 官网地址:http://www.redisant.cn/rocketmq 快速查看所有 RocketMQ 集群,包括Brokers.Topic ...

  10. IIS 部署 docsify

    来源:https://www.cnblogs.com/yokeqi/p/14276176.html 来源:https://sspai.com/post/60534 docsify之前部署在Linux+ ...