前言
上一篇已經實現在xadmin后台編輯markdown語法的文檔，編輯完成之后發布博客，在前端html能把markdown語法顯示出來。
主要思路是先從數據庫把markdown的代碼讀出來，導入markdown模塊，把markdown的語法轉換成html語法，再嵌入到模板里面。
markdown
先使用pip按照markdown模塊，用於轉換markdown為html
pip install markdown
在后台頁面編輯的markdown內容，markdown里面插入代碼一般有兩種方式：一種是把代碼全部選中，然后縮進（四個空格）
第二種是代碼部分用三個```包起來,后面可以跟着對應語言python，如下（這里不太好展示，前面的\要去掉）
# django 框架介紹
Django 項目是一個Python定制框架，它源自一個在線新聞 Web 站點，於 2005 年以開源的形式被釋放出來。Django 框架的核心組件有：
- 用於創建模型的對象關系映射
- 為最終用戶設計的完美管理界面
- 一流的 URL 設計
- 設計者友好的模板語言
- 緩存系統。
# 圖片展示
圖片顯示
# 代碼展示
\```python # 前面的\去掉
from django.db import models
from mdeditor.fields import MDTextField # 必須導入
class Blog(models.Model):
'''博客管理'''
title = models.CharField(max_length=30)
content = MDTextField() # 注意為MDTextField()
def __str__(self):
return self.__doc__ + "title->" + self.title
class Meta:
verbose_name = "博客發布"
verbose_name_plural = verbose_name
\``` # 前面的\去掉
views試圖
在views.py中導入markdown，這里extensions里面三個參數用法,
- markdown.extensions.extra 本身包含很多擴展
- markdown.extensions.codehilite 是語法高亮，后面插入代碼會用到
- markdown.extensions.toc 是自動生成目錄
from .models import Blog
import markdown
def detail(request, id):
'''博客詳情展示, 根據id讀取'''
blog = Blog.objects.filter(id=int(id)).first()
blog.content = markdown.markdown(blog.content,
extensions=[
'markdown.extensions.extra',
'markdown.extensions.codehilite',
'markdown.extensions.toc',
],
safe_mode=True,
enable_attributes=False)
context = {
"blogmd": blog
}
return render(request, 'blogmd.html', context)
templates模板
接下來把markdown的內容插入到以下模板的{{ blogmd.content | safe}} 位置，這里需加個safe參數，
Django 出於安全方面的考慮，任何的 HTML 代碼在 Django 的模板中都會被轉義（即顯示原始的 HTML 代碼，而不是經瀏覽器渲染后的格式）。
為了解除轉義，只需在模板標簽使用 safe 過濾器即可，告訴 Django，這段文本是安全的，你什么也不用做
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/hello/css/code.css" type="text/css">
<title>{{blogmd.title}}</title>
</head>
<body>
<div style="margin: 5% 20%;">
<h1>{{blogmd.title}}</h1>
<br>
<div class="author">
<span class="publish-time">2019.04.22 18:28 發布</span>
<span class="wordage"> 作者： 上海-悠悠</span>
<span class="views-count"> 閱讀 9999</span>
</div>
<hr>
{{ blogmd.content | safe}}
</div>
</body>
文件名保存為blogmd.html
urls.py設置
urls.py設置訪問地址
from django.conf.urls import url
from hello import views
urlpatterns = [
url(r'^blog/(.+).html$', views.detail),
]
訪問地址:http://localhost:8000/blog/2.html頁面效果如下
代碼高亮展示
這里代碼部分，默認是不會有背景的，也不會也高亮，如下圖
代碼高亮展示需要安裝Pygments模塊
pip install Pygments
接着在你的app的static目錄新建一個css目錄：hello/static/hello/css
打開cmd, cd到hello/static/hello/css目錄，執行以下指令，會在當前目錄生成一個code.css文件
pygmentize -S default -f html -a .codehilite > code.css
在模板里面引入這個css文件就可以了，在head里面加一個link
<link rel="stylesheet" href="../static/hello/css/code.css" type="text/css">
刷新頁面后，就能顯示高亮的代碼了
