分为两个部分：

------------后台使用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. Python3学习－－正则表达式

    import rer = re.match("Chen\d+","Chen123ronghua123")r = re.match(".+", ...

  2. 鸿蒙HarmonyOS实战-ArkUI组件（页面路由）

    一.路由导航 路由导航是指在应用程序中通过路径导航定位到特定页面的过程.路由导航的实现通常采用路由器(router)来进行管理,路由器根据路径的不同值将用户请求导向到不同的页面. 在HarmonyOS ...

  3. 鸿蒙HarmonyOS实战-ArkUI组件（Navigation）

    一.Navigation Navigation组件通常作为页面的根容器,支持单页面.分栏和自适应三种显示模式.开发者可以使用Navigation组件提供的属性来设置页面的标题栏.工具栏.导航栏等. 在 ...

  4. WPF开发随笔收录-查看PDF文件

    一.前言 在项目的开发过程中,涉及到查看服务器生成的pdf报告文件的查看,起初的方案是通过spire.pdf这个库来将pdf文件转换成图片,然后在进行查看.但是经常被吐槽预览不清晰,后面上网发现了一个 ...

  5. 特殊border的样式 -- CSS3实现三种切角效果

    效果一: 代码:<div class="cornerCut">corner cutcorner cutcorner cutcorner cut</div> ...

  6. 力扣784(java)-字母大小写全排列（中等）

    题目: 给定一个字符串 s ,通过将字符串 s 中的每个字母转变大小写,我们可以获得一个新的字符串. 返回 所有可能得到的字符串集合 .以 任意顺序 返回输出. 示例 1: 输入:s = " ...

  7. 牛客网-SQL专项训练3

    ①这里有一张user表包含如下信息: 现在要把name列的所有值都转换为大写,并将字段重命名为names,像下面这样: SQL语句为:SELECT UCASE(name) AS names FROM ...

  8. portainer安装，配置，使用

    Portainer安装 Portainer是Docker容器管理可视化界面,主要是可以通过可视化界面创建,管理Dockert容器,并且支持多个节点管理(免费版支持五个节点). Portainer官网地 ...

  9. 记一次 JMeter 压测 HTTPS 性能问题

    ​简介:在使用 JMeter 压测时,发现同一后端服务,在单机 500 并发下,HTTP 和 HTTPS 协议压测 RT 差距非常大.同时观测后端服务各监控指标水位都很低,因此怀疑性能瓶颈在 JMet ...

  10. 阿里云贾扬清：大数据+AI工程化，让数据从「成本」变为「资产」

    简介: 近年来,数字经济发展迅速,企业转型背后频频涌现「数字力量」的身影.云计算.大数据.人工智能的快速融合形成了数字经济的新基建,也为数字经济发展带来了新的机遇. 5 月 20 日,阿里巴巴副总裁. ...