分为两个部分:

------------后台使用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. MOGDB/openGauss索引推荐及虚拟索引

    MOGDB/openGauss 索引推荐及虚拟索引 索引推荐 在 ORACLE 的优化中,可能大家有接触过 SQL Tuning Advisor(SQL 调优顾问,STA),类似的 MOGDB/ope ...

  2. openGauss每日一练(全文检索)

    openGauss 每日一练(全文检索) 本文出处:https://www.modb.pro/db/224179 学习目标 学习 openGauss 全文检索 openGauss 提供了两种数据类型用 ...

  3. 报名直达丨HarmonyOS开发者创新大赛线下城市交流会来了,约吗?

    HarmonyOS开发者创新大赛线下城市交流会 正式开启啦! 在这里,将有专业的讲师 与HarmonyOS开发者们面对面演示开发实操.交流开发心得 还等什么?赶快扫码报名吧~↓↓↓ 城市交流会报名链接 ...

  4. 学习Source Generators之了解Source Generators的应用场景

    前面的文章我们都初步学习了Source Generators的使用方式以及做了一些简单的代码生成工具. 但是Source Generators除了做自动代码生成之外,还能有别的应用场景,本文来了解一下 ...

  5. Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案。此项目包含开发分布式应用服务的必需组件-Nacos 、Sentinel等

    概述 Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此项目包含开发分布式应用服务的必需组件. 方便开发者通过 Spring Cloud 编程模型轻松使用这些组件来开发 ...

  6. mysql 必知必会整理—sql 简单语句[二]

    前言 简单整理一下sql 排序与过滤. 正文 在这里需要创建一下一个数据库实例. 为了方便直接用docker 创建一下啊,方便简洁. https://hub.docker.com/_/mysql 按照 ...

  7. 阿里云全站加速DCDN重磅发布!打造新一代加速引擎

    简介: 新一代的加速引擎DCDN,安全.高效.可计算 在数字化转型变革逐步深入的当下,安全高效成为企业上云.全球化部署的关键需求. 随着应用场景复杂度不断提升.业务需求差异化发展,为了给企业提供更完善 ...

  8. 阿里开源自研工业级稀疏模型高性能训练框架 PAI-HybridBackend

    ​简介:近年来,随着稀疏模型对算力日益增长的需求, CPU集群必须不断扩大集群规模来满足训练的时效需求,这同时也带来了不断上升的资源成本以及实验的调试成本.为了解决这一问题,阿里云机器学习PAI平台开 ...

  9. 比心云平台基于阿里云容器服务 ACK 的弹性架构实践

    ​简介:本文主要探讨比心云平台如何利用阿里云容器服务 ACK,来构建应用弹性架构,进一步优化计算成本. 作者:韩韬|比心技术 前言 应用容器化改造后,不可避免地会面临这样一个问题:Kubernetes ...

  10. 基于 Flutter 的 Web 渲染引擎「北海」正式开源!

    简介: 阿里巴巴历时 3 年自研开发的 Web 渲染引擎北海(英文名:Kraken)正式开源,致力打造易扩展,跨平台,高性能的渲染引擎,并已在优酷.大麦.天猫等业务场景中使用. 作者 | 染陌来源 | ...