Django搭建个人博客:使用Markdown语法书写文章

上一章我们实现了文章详情页面。为了让文章正文能够进行标题、加粗、引用、代码块等不同的排版(像在Office中那样!),我们将使用Markdown语法。

安装Markdown

Markdown是一种轻量级的标记语言,它允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的或者HTML文档。建议读者一定要花五分钟时间熟悉一下Markdown的语法,熟练后码字效率一定会大幅提高。

关于Markdown语法看这里:Markdown 语法介绍

安装markdown也很简单:进入虚拟环境,输入指令pip install markdown即可。

使用Markdown

为了将Markdown语法书写的文章渲染为HTML文本,首先改写article/views.pyarticle_detail()

article/views.py

...

# 引入markdown模块
import markdown

def article_detail(request, id):
    article = ArticlePost.objects.get(id=id)

    # 将markdown语法渲染成html样式
    article.body = markdown.markdown(article.body,
        extensions=[
        # 包含 缩写、表格等常用扩展
        'markdown.extensions.extra',
        # 语法高亮扩展
        'markdown.extensions.codehilite',
        ])

    context = { 'article': article }
    return render(request, 'article/detail.html', context)

代码中markdown.markdown语法接收两个参数:第一个参数是需要渲染的文章正文article.body;第二个参数载入了常用的语法扩展,markdown.extensions.extra中包括了缩写、表格等扩展,markdown.extensions.codehilite则是后面要使用的代码高亮扩展。

然后,修改templates/article/detail.html中有关文章正文的部分:

templates/article/detail.html

...

# 在 article.body 后加上 |safe 过滤器
<p>{{ article.body|safe }}</p>

Django出于安全的考虑,会将输出的HTML代码进行转义,这使得article.body中渲染的HTML文本无法正常显示。管道符|是Django中过滤器的写法,而|safe就类似给article.body贴了一个标签,表示这一段字符不需要进行转义了。

这样就把Markdown语法配置好了。

启动服务器,在后台中新录入一条用markdown语法书写的文章,内容如下:

# 国风·周南·关雎
---
**关关雎鸠,在河之洲。窈窕淑女,君子好逑。**

参差荇菜,左右流之。窈窕淑女,寤寐求之。

---
+ 列表一
+ 列表二
    + 列表二-1
    + 列表二-2
---

​```python
def article_detail(request, id):
    article = ArticlePost.objects.get(id=id)
    # 将markdown语法渲染成html样式
    article.body = markdown.markdown(article.body,
        extensions=[
        # 包含 缩写、表格等常用扩展
        'markdown.extensions.extra',
        # 语法高亮扩展
        'markdown.extensions.codehilite',
        ])
    context = { 'article': article }
    return render(request, 'article/detail.html', context)
​```

返回文章详情,结果如下:

[图片上传失败...(image-3e820f-1537878395887)]

很好,但是代码块还是不怎么好看。

写技术文章没有代码高亮怎么行。继续努力。

代码高亮

static目录中新建一个目录md_css/,一会儿放置代码高亮的样式文件。

重新打开一个命令行窗口,进入虚拟环境,安装Pygments:pip install Pygments

Pygments是一种通用语法高亮显示器,可以帮助我们自动生成美化代码块的样式文件。

在命令行中进入刚才新建的md_css目录中,输入Pygments指令:

pygmentize -S monokai -f html -a .codehilite > monokai.css

这里有一点需要注意, 生成命令中的 -a 参数需要与真实页面中的 CSS Selector 相对应,即.codehilite这个字段在有些版本中应写为.highlight。如果后面的代码高亮无效,很可能是这里出了问题。

回车后检查一下,在md_css目录中是否自动生成了一个叫monokai.css的文件,这是一个深色背景的高亮样式文件。

接下来我们在base.html中引用这个文件:

templates/base.html

<head>
    ...
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    
    <!-- 引入monikai.css -->
    <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
    
</head>
...

重新启动服务器,顺利的话看到如下:

image

除了Monokai这个深色的样式外,Pygments还内置了很多其他的样式,这个就看喜好选择了。

各种不同样式可以在这里参照:pygments-css

总结

本章引进了Markdown语法以及代码高亮扩展,从此可以写排版漂亮的文章正文了。

下一章将学习如何创建一篇新的文章。

转载请告知作者并注明出处。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,192评论 6 511
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,858评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,517评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,148评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,162评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,905评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,537评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,439评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,956评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,083评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,218评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,899评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,565评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,093评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,201评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,539评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,215评论 2 358

推荐阅读更多精彩内容

  • 关于Markdown 一整个学期下来,我觉得让我收获最大之一的是学会markdown语言。我们平常都是使用Word...
    Dacade阅读 942评论 0 2
  • 今年是手游爆发的一年,甚至已经有多款游戏月收入即将要突破1亿元,无数的创业者涌入到手游创业中,但只有极少部分人才能...
    乱谈的蛇精病阅读 315评论 0 4
  • 细碎的阳光打在原木的桌面上,透过窗外的竹叶的缝隙,斑驳的映在了沙发上。静谧的室内流转着丝丝不一样的气息,对角的长条...
    nnnnj阅读 79评论 0 0
  • 以为你曾回来过,反复的枕折,压印的床褥。 以为你曾回来过,深宵的帘动,偶来的风声。 夜夜焚香,难辨你的踪迹; 晚晚...
    5b3cd5b56e07阅读 167评论 0 1