Django博客教程之四:Markdown和代码高亮

时间:2021-09-18 00:13:33

一、Markdown你的博文

Markdown越来越流行,越来越多的写博客的博主都喜欢上了markdown这种标记性语言的易用性和美观性,像简书,作业部落,Mou都是比较出名的markdown在线或者离线形式

现在我们就来markdown自己的博客,首先是安装markdown库,使用下面命令

 Django博客教程之四:Markdown和代码高亮

接下去是怎么markdown你的博文,在article下建立新文件夹templatetags,然后定义自己的template filter:在templatetags中建立__init__.py,让文件夹可以被看做一个包,然后在文件夹中新建custom_markdown.py文件,代码如下

 Django博客教程之四:Markdown和代码高亮

在setting.py的INSTALLED_APPS列表最后添加article.templatetags.custom_markdown

然后只需要对需要进行markdown化的地方进行简单的修改,我们回到templates文件夹中,修改post.html文件:

 Django博客教程之四:Markdown和代码高亮

{% load custom_markdown %}添加自定义的filter,然后使用filter的方式为{{post.content|custom_markdown}}

现在我们进入admin界面,对Article对象的内容content使用markdown语句进行修改

 Django博客教程之四:Markdown和代码高亮

现在我们在看一下每一篇博文的效果

 Django博客教程之四:Markdown和代码高亮

我们的主页home.html也要做响应的修改

Django博客教程之四:Markdown和代码高亮

现在启动web服务器,在浏览器中输入http://localhost:9000/,可以看到全新的MarkDown效果

 Django博客教程之四:Markdown和代码高亮

 

二、代码高亮

这里代码高亮使用了一个CSS文件导入到网页中就可以实现了,因为上面写markdown的filter中已经添加了扩展高亮的功能,所以现在只需要下载CSS文件就好了

在pygments找到你想要的代码主题,这里选择monokai,然后在pyhments-css下载你喜欢的CSS主题,然后加入当博客目录的static目录下

或者使用最简单的方法,直接修改base.html文件,添加如下一行代码:

<link rel="stylesheet" href="http://picturebag.qiniudn.com/monokai.css">

 Django博客教程之四:Markdown和代码高亮

现在添加一个带有markdown样式的代码的文章,就能看到效果了,在markdown中,引用代码用连续四个空格表示

 Django博客教程之四:Markdown和代码高亮

将文章保存后,进入前台文章查看效果

 Django博客教程之四:Markdown和代码高亮