基于Django的Blog 8.使用Markdown语法书写文章

使用Markdown语法书写文章

1.Markdown安装

pip install markdown

2.使用Markdown

2.1 将Markdown语法书写的文章渲染为HTML文本,

article/views.py

# 文章详情
def article_detail(request, id):
    # 取出相应的文章
    article = ArticlePost.objects.get(id=id)
    # 将markdwon语法渲染成html样式
    article.body = markdown.markdown(article.body,
        extensions=[
            # 包含缩写, 表格等常用扩展
            'markdown.extensions.extra',
            # 语法高亮扩展
            'markdown.extensions.codehilite',
        ])

    # 传递给模板的对象
    context = { 'article': article }
    # 载入模板
    return render(request, 'article/detail.html', context)

2.2 修改文章正文部分的模板

templates/article/detail.html

...

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

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

也就是说当你在正文输入了markdown格式的文字时,views通过新的article_detail方法,将markdown文字转化为html展现出来,但是中途会遇到django的安全转义,在html中添加|safe就不会对其转义了.

启动服务器

录入一条用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-20200604180013323

3. 代码高亮

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

pygments是一种通用语法高亮显示器,可以自动生成梅花代码块的样式文件

  1. pip install Pygments

  2. cd到static/md_css/

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

回车后检查一下，在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-20200604181110311

Perfect! 成功~

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

posted on 2020-07-05 20:57  sunnywillow  阅读(131)  评论(0)    收藏  举报