分为两个部分：

------------后台使用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. Tailwind CSS 使用指南

    0x01 概述 (1)简介 Tailwind CSS 官网:https://www.tailwindcss.cn/ Tailwind CSS 是一个 CSS 框架,使用初级"工具" ...

  2. CentOS 5.5编译安装vsftpd-2.3.4配置虚拟用户

    CentOS 5.5编译安装vsftpd-2.3.4配置虚拟用户 2012-02-22 17:18:15|  分类: rhel_vsftp|举报|字号 订阅 centos 5.5编译安装vsftpd- ...

  3. Python2同时输出中文和变量时中文乱码

    Python2同时输出中文和变量时中文乱码 一.问题描述 最近在学习tensorflow时,突然发现一个问题,python2在输出中文和变量时会出现一点问题,如下图: 可以看到,输出并不是想要的结果, ...

  4. Excel 特殊分组汇总示例

    期望结果: 按照成绩划分区间段来分组时,定义好值的划分区间后,只需用 pseg 函数便可以将分数分好段,然后统计出各段人次即可. SPL 代码如下:   A B 1 =clipboard().impo ...

  5. redis 简单整理——阻塞问题[二十五]

    前言 简单介绍一下redis的阻塞问题. 正文 Redis是典型的单线程架构,所有的读写操作都是在一条主线程中完成 的.当Redis用于高并发场景时,这条线程就变成了它的生命线.如果出现 阻塞,哪怕是 ...

  6. gitlib配置

    第1步:下载Java并安装Java.一般来说下载jdk对应的版本就行. 第2步:配置Java环境变量,具体如下: 1. 新建:变量名:JAVA_HOME:变量值:C:\Program Files\Ja ...

  7. vue项目如何部署？有遇到布署服务器后刷新404问题吗？

    一.如何部署 前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可 我们知道vue项目在构建后,是生成一系列的静态文件 常规布署我们只需要 ...

  8. 本地部署Llama3-8B/72b 并进行逻辑推理测试

    美国当地时间4月18日,Meta开源了Llama3大模型,目前开源版本为8B和70B.Llama 3模型相比Llama 2具有重大飞跃,并在8B和70B参数尺度上建立了LLM模型的新技术.由于预训练和 ...

  9. Pandas+ SLS SQL：融合灵活性和高性能的数据透视

    简介: Pandas是一个十分强大的python数据分析工具,也是各种数据建模的标准工具.Pandas擅长处理数字型数据和时间序列数据.Pandas的第一大优势在于,封装了一些复杂的代码实现过程,只需 ...

  10. 进一步释放技术红利，阿里云推出全新内存增强型实例re6，性能提升30%

    5月7日,国内最大云计算厂商阿里云宣布推出全新一代内存增强型实例,提供1:14.8超大内存比内存容量,满足内存型数据库如SAP HANA.Redis等应用,充分释放技术红利,帮助线下企业快速上云,完成 ...