分为两个部分：

------------后台使用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. 踩坑指南：入门OpenTenBase之监控篇

    本次监控将采用Prometheus.Grafana可视化工具以及postgres_exporter对OpenTenBase进行全面监控和优化. 安装监控 Docker安装 1.Docker要求 Cen ...

  2. MongoDB命令行交互

    命令行交互 命令行交互一般是学习数据库的第一步,不过这些命令在后续用的比较少,了解即可. 角色命令 创建角色 use admin db.createUser({"user": &q ...

  3. 【5】Spring IoC介绍

    有部分 Java 开发者对 IoC(Inversion Of Control)和 DI(Dependency Injection)的概念有些混淆,认为二者是对等的. IoC 其实有两种方式,一种就是 ...

  4. nginx重新整理——————静态服务[四]

    前言 简单介绍一下nginx的静态服务. 正文 一般静态服务一般是alias 和 root. 就是上面这个哈. 那么root和alias 的区别是啥呢? 比如root: 然后修改一下就是: 如果这样配 ...

  5. redis 简单整理——客户端哨兵模式[三十]

    前言 简单介绍一下客户端的哨兵模式连接. 正文 Sentinel节点集合具备了监控.通知.自动故障转移.配置提供者若干 功能,也就是说实际上最了解主节点信息的就是Sentinel节点集合, 而各个 主 ...

  6. 重新点亮linux 命令树————网络配置的查看[十一三]

    前言 简单整理一下网络配置. 正文 通过ifconfig 查看. 这个就是ip地址. 网卡mac地址. 还有一块信息非常重要: 这个io开头的信息,这里面就是我们127.0.0.1的信息. 那么就来演 ...

  7. bookstack书栈网docker搭建

    准备好数据后,直接运行以下命令即可. docker run -d --name bookstack \ --restart always \ --privileged=true\ -p 8181:81 ...

  8. 力扣128(java&python)-最长连续序列（中等）

    题目: 给定一个未排序的整数数组 nums ,找出数字连续的最长序列(不要求序列元素在原数组中连续)的长度. 请你设计并实现时间复杂度为 O(n) 的算法解决此问题. 示例 1: 输入:nums = ...

  9. 阿里云徐立：面向容器和 Serverless Computing 的存储创新

    ​简介:以上为大家分享了阿里云容器存储的技术创新,包括 DADI 镜像加速技术,为容器规模化启动奠定了很好的基础,ESSD 云盘提供极致性能,CNFS 容器网络文件系统提供极致的用户体验. 作者:徐立 ...

  10. [Trading] 人物: 陈向忠日内交易技术核心 - 趋势形态与成交量

    分时图判断趋势(开仓方向) 只要是低点不断抬高的,就是上涨趋势,高点是否提高是其次的. 只要是高点不断降低的那就是下降趋势,假如低点也在不断降低,那么这样的下降趋势就更加完美一些. 很多人就是看对了趋 ...