专栏首页数据结构笔记Django搭建博客(九):为博客添加代码高亮显示和 md文档支持

Django搭建博客(九):为博客添加代码高亮显示和 md文档支持

一、用到的模块

  • Markdown
  • pygments
  • re

安装直接使用 pip 安装最新版本即可

二、支持的 markdown格式

目前只支持 Typora编辑器所支持的 markdown格式。

特别需要注意的是:代码块必须使用三个 '`' 符号包裹起来才能正确识别,语言标记可有可无,但是三个 '`' 必须单独成行。

三、解析思路

先用正则将代码块从文档中提取出来,再用 pygments对代码进行上色,并生成 html标签。

再将生成的 html标签插入到原来代码的位置,然后再用 markdown将处理之后的文档整个解析为 html文档即可。

四、遇到的问题

1、如何将上色后的代码放回原位

一开始我想直接使用占位符替换原来的代码,然后再根据占位符来将代码插入回原来的位置。

但是在仔细看过 re库的使用后,我发现 re.sub() 方法是可以接受一个函数来返回需要替换的字符串。

所以我们可以直接在函数里将代码转化成 html标签并返回,这样就可以将转化后的 html标签放到对应位置了。

2、如何显示行号

pygments是可以自动生成带行号的 html标签的(只需要将 lineno设置为 True 即可)。

但是我发现 pygments生成的 html标签其实是一个 1行 2列的表格,一列用来显示行号,一列用来显示代码。

然而这样却有一个问题,就是当一行代码太长时会自动换行,而且行号有时候不能和对应的行对齐。

解决办法是:自定义一个 formatter来生成自定义的代码块,这里我用了两个 ol标签,一个用来包裹行号,另一个用来包裹代码标签。

五、使用方法

我将代码封装成了一个函数,这个函数接受一个 markdown文档的字符串,返回 html字符串。

返回的字符串可以直接插入 html页面中(Django中记得使用 safe过滤器)。

使用方法如下:

#此处引入封装好的函数,假设在同级目录下
from .markdown_to_html import md_to_html

md_str = '这是一段 md字符串'

html_str = md_to_html(md_str)

代码请看 :markdown_to_html.py

生成 html代码所需的样式文件:style.css

项目地址:myblog

在线 demo:Test Markdown

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端:CSS字体大小 px、em、rem的区别

    1px的长度表示显示器中一个像素(pixel)的长度,实际显示的效果和显示器的 DPI(Dot Per Inch,每英寸像素数)有关,DPI越大每英寸的像素数越...

    渔父歌
  • python包管理工具——pip的使用

    pip是python自带的包管理工具,我们可以使用pip来安装、卸载和更新python包,这篇文章会介绍几条常用的pip命令,以便大家更方便的使用python。

    渔父歌
  • Django搭建博客(四):渲染前数据的处理

    一个简单得方法就是不直接在模板里使用 date属性,而是使用date属性的year 、month 和 day属性来拼凑我们所需的日期格式。

    渔父歌
  • 教你使用Python简单暴力爬取大量妹子图片

    当我们在我们的浏览器上输入www.baidu.com这个url后按下回车后,就向百度的服务器端发起请求,请求百度搜索的主页面资源,此时百度的服务器端收到请求,处...

    xujjj
  • 地图可视化神器kepler.gl近期重要更新

    kepler.gl作为开源地理空间数据可视化神器,也一直处于活跃的迭代开发状态下。而在前不久,kepler.gl正式发布了其2.4.0版本,下面我们就来对其重...

    Feffery
  • 超好用的地图可视化神器

    kepler.gl作为开源地理空间数据可视化神器,也一直处于活跃的迭代开发状态下。而在前不久,kepler.gl正式发布了其2.4.0版本,下面我们就来对其重要...

    bugsuse
  • python一个命令开启http服务器

    1、python开启http服务器

    py3study
  • python动态柱状图图表可视化:历年软科中国大学排行

    本来想参照:https://mp.weixin.qq.com/s/e7Wd7aEatcLFGgJUDkg-EQ搞一个往年编程语言动态图的,奈何找不到数据,有数据...

    绝命生
  • 【apache+cgi+python】c

    虽然现在开发web用的都是一些成熟的框架, 使我们可以不用关心底层的接口逻辑, 但是多了解一些底层的知识对我们也是有帮助的。

    py3study
  • 登录的装饰器

    def login_decorator(func): ''' 这个函数是一个登录验证的装饰器,它还包含了对ajax登录的验证 :p...

    用户2337871

扫码关注云+社区

领取腾讯云代金券