摘要:重新打開一個命令行窗口,進入虛擬環境,安裝是一種通用語法高亮顯示器,可以幫助我們自動生成美化代碼塊的樣式文件。
上一章我們實現了文章詳情頁面。為了讓文章正文能夠進行標題、加粗、引用、代碼塊等不同的排版(像在Office中那樣!),我們將使用Markdown語法。
安裝MarkdownMarkdown是一種輕量級的標記語言,它允許人們“使用易讀易寫的純文本格式編寫文檔,然后轉換成有效的或者HTML文檔。建議讀者一定要花五分鐘時間熟悉一下Markdown的語法,熟練后碼字效率一定會大幅提高。
關于Markdown語法看這里:Markdown 語法介紹
安裝markdown也很簡單:進入虛擬環境,輸入指令pip install markdown即可。
使用Markdown為了將Markdown語法書寫的文章渲染為HTML文本,首先改寫article/views.py的article_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 過濾器{{ article.body|safe }}
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) ?```
返回文章詳情,結果如下:
很好,但是代碼塊還是不怎么好看。
寫技術文章沒有代碼高亮怎么行。繼續努力。
代碼高亮在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 ... ...
重新啟動服務器,順利的話看到如下:
除了Monokai這個深色的樣式外,Pygments還內置了很多其他的樣式,這個就看喜好選擇了。
各種不同樣式可以在這里參照:pygments-css
總結本章引進了Markdown語法以及代碼高亮擴展,從此可以寫排版漂亮的文章正文了。
下一章將學習如何創建一篇新的文章。
有疑問請在杜賽的個人網站留言,我會盡快回復。
或Email私信我:dusaiphoto@foxmail.com
項目完整代碼:Django_blog_tutorial
轉載請告知作者并注明出處。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/42487.html
摘要:一些表單界面元素文本框或復選框非常簡單并內置在中,而其他會復雜些像彈出日期選擇等操作控件。和標簽中的屬性指定了當前文本框提交的數據的名稱,它必須與表單類中的字段名稱對應,否則服務器無法將字段和數據正確的對應起來。 前面我們已經學會如何用Markdown語法書寫文章了。 但是還有問題呀。之前寫文章都是在后臺中進行的,萬一有別的普通用戶也要發表文章怎么辦?萬一我想拓展些后臺中沒有的提交驗證...
摘要:語法支持再次打開文件,在文件的最后添加指明了使用語法標記,做了兩個拓展,其中表示支持語法高亮,包含的特性請參見相關文檔。語法高亮支持注意這一步必須在安裝完主題之后。 目前網上搭建個人博客的方案很多,雖然使用諸如 Wordpress ( PHP )、Hexo ( Node.js ) 等可以方便快速地搭建一款功能齊全的高性能個人博客,但是本文將嘗試一種更為小眾化的方案 —— 一款基于 dj...
摘要:博文也是同樣的,好的目錄對博主和讀者都很有幫助。文中的目錄之前我們已經為博文支持了語法,現在繼續增強其功能。修改文章詳情視圖文章詳情目錄擴展僅僅是將將擴展添加了進去。通過將目錄傳遞給模板。 對會讀書的人來說,讀一本書要做的第一件事,就是仔細閱讀這本書的目錄。閱讀目錄可以對整體內容有所了解,并清楚地知道感興趣的部分在哪里,提高閱讀質量。 博文也是同樣的,好的目錄對博主和讀者都很有幫助。更...
摘要:注意如果你按照教程中的方法做完后發現代碼依然沒有高亮,請依次檢查以下步驟確保在渲染文本時添加了拓展,詳情見上文。有些樣式文件可能對代碼高亮沒有作用,首先嘗試用樣式文件做測試。在支持語法和代碼高亮追夢人物的博客的評論區留言。 為了讓博客文章具有良好的排版,顯示更加豐富的格式,我們使用 Markdown 語法來書寫我們的博文。Markdown 是一種 HTML 文本標記語言,只要遵循它約定...
摘要:后面兩個編輯器自帶,不用單獨下載,添上就可以了添加相關插件這樣就完成了代碼高亮效果不錯在前臺使用為了讓用戶在前臺也能使用富文本編輯器,還得對代碼稍加改動。對于有些不喜歡的人來說,甚至可以連博文都使用提供的富文本編輯器。 前面我們已經實現了用Markdown語法寫文章了。但是文章的評論用Markdown就不太合適了,你不能強求用戶也花時間去熟悉語法啊。另外評論中通常還有表情、帶顏色的字體...
閱讀 994·2023-04-25 14:41
閱讀 2445·2021-09-28 09:35
閱讀 3619·2019-08-30 15:53
閱讀 1940·2019-08-29 15:26
閱讀 1060·2019-08-28 17:59
閱讀 4229·2019-08-26 13:45
閱讀 2835·2019-08-26 13:33
閱讀 1639·2019-08-26 11:46