文章目錄
- 0.前言
- 1.安裝 Python Markdown
- 2.在 detail 視圖中解析 Markdown
- 3.safe 標簽
- 4.代碼高亮
- 5.效果展示
0.前言
Markdown 是一種 HTML 文本標記語言，只要遵循它約定的語法格式，Markdown 的解析工具就能夠把 Markdown 文檔轉換為標準的 HTML 文檔，從而使文章呈現更加豐富的格式，例如標題、列表、代碼塊等等 HTML 元素。
1.安裝 Python Markdown
將 Markdown 格式的文本解析成標準的 HTML 文檔是一個復雜的工程，好在已有好心人幫我們完成了這些工作，直接拿來使用即可。首先安裝 Markdown，這是一個 Python 第三方庫，在項目根目錄下運行命令：
pipenv install markdown
2.在 detail 視圖中解析 Markdown
將 Markdown 格式的文本解析成 HTML 文本非常簡單，只需調用這個庫的 markdown 方法。我們書寫的博客文章內容存在 Post 的 body 屬性里，回到我們的詳情頁視圖函數，對 post 的 body 的值做一下解析，把 Markdown 文本轉為 HTML 文本再傳遞給模板：
文件位置：blog/views.py
import markdown
from django.shortcuts import get_object_or_404, renderfrom .models import Postdef detail(request, pk):post = get_object_or_404(Post, pk=pk)post.body = markdown.markdown(post.body,extensions=['markdown.extensions.extra','markdown.extensions.codehilite','markdown.extensions.toc',])return render(request, 'blog/detail.html', context={'post': post})
這樣我們在模板中顯示 {{ post.body }} 的時候，就不再是原始的 Markdown 文本了，而是解析過后的 HTML 文本。
注意這里我們給 markdown 解析函數傳遞了額外的參數 extensions，它是對 Markdown 語法的拓展，這里使用了三個拓展，分別是 extra、codehilite、toc。extra 本身包含很多基礎拓展，而 codehilite 是語法高亮拓展，這為后面的實現代碼高亮功能提供基礎，而 toc 則允許自動生成目錄。
Markdown——入門指南：戳這里
Markdown 語法說明：戳這里
3.safe 標簽
如果此時運行服務器，在發布的文章詳情頁會出現類似于一堆亂碼一樣的 HTML 標簽，這些標簽本應該在瀏覽器顯示它自身的格式，但是 django 出于安全方面的考慮，任何的 HTML 代碼在 django 的模板中都會被轉義（即顯示原始的 HTML 代碼，而不是經瀏覽器渲染后的格式）。
為了解除轉義，只需在模板變量后使用 safe 過濾器即可，告訴 django，這段文本是安全的，你什么也不用做。在模板中找到展示博客文章內容的 {{ post.body }} 部分，為其加上 safe 過濾器：{{ post.body|safe }}
4.代碼高亮
代碼高亮我們借助 js 插件來實現，其原理就是 js 解析整個 html 頁面，然后找到代碼塊元素，為代碼塊中的元素添加樣式。我們使用的插件叫做 highlight.js 和 highlightjs-line-numbers.js，前者提供基礎的代碼高亮，后者為代碼塊添加行號。
首先在 base.html 的 head 標簽里引入代碼高亮的樣式，有多種樣式供你選擇，這里我們選擇 GitHub 主題的樣式。樣式文件直接通過 CDN 引入，同時在 style 標簽里自定義了一點元素樣式，使得代碼塊的顯示效果更加完美。
<head>...<link href="https://cdn.bootcss.com/highlight.js/9.15.8/styles/github.min.css" rel="stylesheet"><style>.codehilite {padding: 0;}/* for block of numbers */.hljs-ln-numbers {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;text-align: center;color: #ccc;border-right: 1px solid #CCC;vertical-align: top;padding-right: 5px;}.hljs-ln-n {width: 30px;}/* for block of code */.hljs-ln .hljs-ln-code {padding-left: 10px;white-space: pre;}</style>
</head>
然后是引入 js 文件，因為應該等整個頁面加載完，插件再去解析代碼塊，所以把 js 文件的引入放在 body 底部：
<body><script src="https://cdn.bootcss.com/highlight.js/9.15.8/highlight.min.js"></script><script src="https://cdn.bootcss.com/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script><script>hljs.initHighlightingOnLoad();hljs.initLineNumbersOnLoad();</script>
</body>
5.效果展示
在后臺添加Markdown格式文章，如下：
運行服務器，效果如下：
![android gravity參數,Gravity - [ Android中文手冊 ] - 在線原生手冊 - php中文網](http://pic.xiahunao.cn/android gravity參數,Gravity - [ Android中文手冊 ] - 在線原生手冊 - php中文網)
