首页 > 其他分享 >django中实现Markdown

django中实现Markdown

时间:2023-12-09 17:46:21浏览次数:36  
标签:Markdown 实现 html django content markdown articleDetail extensions

分为两个部分:

------------后台使用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

... ...

 

标签:Markdown,实现,html,django,content,markdown,articleDetail,extensions
From: https://www.cnblogs.com/zhangyh-blog/p/17891154.html

相关文章

  • Django DRF - 框架安装使用(一)
    DRF-框架安装使用一.在开发Web应用中,有两种应用模式前后端不分离前后端分离DRF框架使用了前后端分离的模式二.Restful设计方法请求url(路径)请求方法1.路径资源作为网址,只能有名词,不能有动词,而且所用的名词往往与数据库的表名对应。举例来说,以下是不好的例子:/getProducts/li......
  • Python - 实现【单例模式】的四种方法
    方法一:使用模块实现单例模式在Python中,每个模块只会被导入一次,因此可以将需要实现单例模式的类定义在一个模块中,每次需要使用该类时,将该模块导入即可。#singleton.pyclassSingleton:passsingleton=Singleton()在其他模块中直接引用这个singleton对象即可。2.方法二:使......
  • 『江鸟中原』手表实现投骰子
    我是中工的葛腾辉,这是我的鸿蒙结课大作业,以下是我的作业报告。前言在日常的兵棋游戏中,投骰子是一个必不可少的环节,用来模拟各种概率,为了更方便的使用这个工具,我准备把投骰子功能移植到华为手表上。最终效果图创建项目DevEcoStudio下载安装成功后,打开DevEcoStudio,点击左上角的File......
  • 构建外卖系统:使用Django框架
    在当今数字化的时代,外卖系统的搭建不再是什么复杂的任务。通过使用Django框架,我们可以迅速建立一个强大、灵活且易于扩展的外卖系统。本文将演示如何使用Django构建一个简单的外卖系统,并包含一些基本的技术代码。步骤一:安装Django首先,确保你已经安装了Python。然后,通过以下命令安装......
  • 实现一个简单的外卖系统
    在这个技术飞速发展的时代,外卖系统已经成为人们生活中的一部分。通过一些简单的技术代码,我们可以搭建一个基本的外卖系统,让用户方便地选择、下单和支付。本文将使用Python和Flask框架为基础,演示一个简单的外卖系统的实现。步骤一:安装依赖首先,确保你已经安装了Python和Flask。如果没......
  • 『江鸟中原』鸿蒙应用开发:实现新闻app
    大家好,我是中原工学院的张迅,以下是我的作业报告:   已知app主要为用户提供信息,使其能够实现信息流展示、页面跳转、搜索、评论等功能   这里主要以一款新闻类app为例,展开讲解,如图:一、观察页面所需要实现的效果:1.从本地后端获取新闻资讯Feed流 2.切换Teb页签 3.下拉......
  • 『江鸟中原』鸿蒙——设计聊天软件界面并实现登录跳转
    环境搭建软件要求 DevEcoStudio版本:DevEcoStudio4.0Beta1BuildVersion:4.0.0.201,builtonJune10,2023。 HarmonyOSSDK版本:APIversion9。硬件要求设备类型:华为手机或运行在DevEcoStudio上的华为手机设备模拟器。HarmonyOS系统:3.1.0DeveloperRelease。简要介......
  • 想想为什么这两段代码,一段可以实现快排,一段实现不了?
    可实现代码#include<stdio.h>voidquicksort(inta[],inti,intj);intmain(){intnum;inta[10001]={0};scanf("%d\n",&num);inti=0;while(i<num){scanf("%d",&a[i]);i++;......
  • Django - 在后台上传文章封面图 - 并在前端页面展示
    需要用到 models.ImageField(),它继承自 models.FileField(), 用ImageField的时候需要安装pillowpipinstallpillow-ihttps://pypi.douban.com/simple/ 首先,进行媒体文件配置:settings中配置:#真正存储图片的文件夹MEDIA_ROOT=os.path.join(BASE_DIR,"media")#......
  • Spring Security 6.x 系列(10)—— SecurityConfigurer 配置器及其分支实现源码分析(二)
    一、前言在本系列文章:SpringSecurity6.x系列(4)——基于过滤器链的源码分析(一)中着重分析了SpringSecurity在SpringBoot自动配置、 DefaultSecurityFilterChain和FilterChainProxy 的构造过程。SpringSecurity6.x系列(7)——SecurityBuilder继承链源码分析中详细分析了......