上一篇已經實現在xadmin後臺編輯markdown語法的文檔,編輯完成之後發布博客,在前端html能把markdown語法顯示出來。
主要思路是先從資料庫把markdown的代碼讀出來,導入markdown模塊,把markdown的語法轉換成html語法,再嵌入到模板裡面。
先使用pip按照markdown模塊,用於轉換markdown為html
pip install markdown
在後臺頁面編輯的markdown內容,markdown裡面插入代碼一般有兩種方式:一種是把代碼全部選中,然後縮進(四個空格)
第二種是代碼部分用三個```包起來,後面可以跟著對應語言python,如下(這裡不太好展示,前面的\要去掉)
# django 框架介紹Django 項目是一個Python定製框架,它源自一個在線新聞 Web 站點,於 2005 年以開源的形式被釋放出來。Django 框架的核心組件有:- 用於創建模型的對象關係映射- 為最終用戶設計的完美管理界面- 一流的 URL 設計- 設計者友好的模板語言- 緩存系統。# 圖片展示圖片顯示# 代碼展示\```python # 前面的\去掉from django.db import modelsfrom 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.titleclass 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 Blogimport markdowndef 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> <span>2019.04.22 18:28 發布</span> <span> 作者:上海-悠悠</span> <span> 閱讀 9999</span> </div> <hr> {{ blogmd.content | safe}}</div></body>
文件名保存為blogmd.html
urls.py設置urls.py設置訪問地址
from django.conf.urls import urlfrom hello import viewsurlpatterns = [ 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">
刷新頁面後,就能顯示高亮的代碼了
2019年《python3自動化UI+接口》課程5月25-7月27開課
主講老師:上海-悠悠
上課方式:QQ群視頻在線教學
上課時間:每周六、周日晚上20:30-22:30
報名費:2000
聯繫QQ:283340479
課表詳情:5月25號開學!第13期《python3自動化測試selenium+接口》課程