python測試開發django-56.模板渲染markdown語法+代碼高亮

2021-12-29 從零開始學自動化測試
前言

上一篇已經實現在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 設計- 設計者友好的模板語言- 緩存系統。# 圖片展示圖片顯示![](/media/editor/1_20190422134140555628.png)# 代碼展示\```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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作者:上海-悠悠</span> <span>&nbsp;&nbsp;&nbsp;&nbsp;閱讀 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+接口》課程

相關焦點

  • Python + Django 開發實戰(下)
    那單元測試的價值在哪裡呢, 總結以下五點:  確保了代碼在一定設定條件下的正確性,幫助我們很容易的檢查出基本的語法錯誤和一般邏輯錯誤 確保了代碼的改動不會影響現有的功能,這一點在代碼重構的時候特別有用,如果沒有單元測試,改動了一個地方,往往不知道會對原有代碼產生什麼影響使開發人員更好的理解代碼邏輯,良好的測試建立在對代碼邏輯的理解上
  • 60行Python代碼開發在線markdown編輯器
    ❝本文示例代碼已上傳至我的Github倉庫https://github.com/CNFeffery/DataScienceStudyNotes❞1 簡介這是我的系列教程「Python+Dash快速web應用開發」的第六期,在上一期的文章中,我們完成了對Dash中回調交互高級特性的探討,在今後陸續推出的教程內容中
  • python測試開發django-1.開始hello world!
    前言當你想走上測試開發之路,用python開發出一個web頁面的時候,需要找一個支持python語言的web框架。
  • 半個小時學會Markdown標記語法
    ,遇到很多錯誤,好腦子不如爛筆頭,能一邊敲代碼一邊做筆記,學起來事倍功半,今天分享大家一個做筆記的工具軟體Typora。高亮==highlight高亮====highlight高亮==下劃線<u>下劃線內容</u>下劃線內容刪除線
  • 使用 Django 進行測試驅動開發
    (TDD),就是先編寫測試用例,然後編寫代碼來滿足測試用例,具體包含以下步驟:通常情況下,我們都是先寫代碼,然後編寫測試用例,因此測試驅動開發是反直覺的,那為什麼還要這麼做呢?基於以下幾點原因:TDD 可以被認為是根據測試用例來說明需求。此後編寫原始碼,重點是滿足這些要求。當測試最終通過時,你可以確信已滿足要求。這種專注可以幫助開發人員避免範圍蔓延。TDD 可以通過較短的開發周期提高開發效率。一次解決測試用例中的個別可以最大限度地減少幹擾因素。重大更改將更容易跟蹤和解決。減少了調試工作,提高了效率,並且將更多時間花在開發上。編寫測試時考慮到了需求。
  • Markdown與LaTeX公式的使用入門指南
    三、Markdown基本語法簡介類似的介紹隨便度娘都能找到,所以不多細說,這裡只提幾個比較重要的點:1、文檔結構相關標題:用#號字體:加粗、斜體、高亮(==這是一段高亮==  ==這是一段高亮==)但特別要注意的是圖片存放的位置,一般來說可以有2種:直接使用外鏈圖片地址(不過有時可能被會屏蔽,或者可能面臨過期的情況)4、插入代碼大段代碼:```python# 這是一段python代碼```效果:
  • Django 學習筆記之模板
    主要接著篇文章的視圖內容,講解模板的用法。另外也說下 Django 學習筆記系列的安排。自己計劃大概 15 篇文章的輸出自己學習 Django 框架的內容,再用大概 10 篇文章進行實戰開發,最後可能用少量的篇幅進行補充。廢話不多說,切回主題。
  • 10道題教你使用python Django框架來實現web應用,值得收藏
    1、django+python27+mysql的生產環境,想換成python3,請問需要哪些注意事項?生產環境數據不想被破壞,所以不敢輕易下手,希望大神指點一下?關於python升級:可以使用Python3自帶工具2to3,將python2的代碼轉換為python3。少部分代碼仍需手工轉換。
  • 用Python加Django十分鐘建個網站
    而Django 是老牌基於Python的CMS框架了,一直聽說很強大,甚至曾經很紅的Ruby On Rails都參考了它的很多概念,今天我們就簡單學習一個首先當然要pip install django然後我們就可以新建一個目錄,在這個目錄下執行django-admin startproject HelloWorld它會創建HelloWord
  • Python常用庫大全
    Pygments – 通用語法高亮工具。 pyparsing – 生成通用解析器的框架。 python-nameparser – 把一個人名分解為幾個獨立的部分。 python-user-agents – 瀏覽器 user agent 解析器。
  • 100個相見恨晚的Python庫(建議收藏)
    try:一個極其簡單的命令行工具,用來試用 python 庫。copier:用於呈現項目模板的庫和命令行實用程序。Invoke:用於管理面向 shell 的子進程,同時支持將可執行的 Python 代碼組織成命令行可調用的狀態。httpie:一個命令行 HTTP 客戶端,cURL 的替代品,易用性更好。iredis:支持自動補全和高亮顯示的 redis 命令行工具。
  • 極速體驗|VS Code+Python敏捷開發
    VS Code不僅僅是代碼的編寫,也可以一鍵式運行 Debug 。VS Code界面美觀大方,功能強勁實用,是免費開源的現代化輕量級代碼編輯器。支持語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性,並針對網頁開發和雲端應用開發做了優化。
  • 1000+ Python第三方庫大合集
    try:一個極其簡單的命令行工具,用來試用 python 庫。copier:用於呈現項目模板的庫和命令行實用程序。Invoke:用於管理面向 shell 的子進程,同時支持將可執行的 Python 代碼組織成命令行可調用的狀態。httpie:一個命令行 HTTP 客戶端,cURL 的替代品,易用性更好。iredis:支持自動補全和高亮顯示的 redis 命令行工具。
  • Python利用Django 構建Rest Api: 快速入門教程
    點擊上方「測試開發技術」,選擇設為「設為星標」
  • 流行的python開發軟體,收藏了!
    https://www.oschina.net/p/wingideWingIDE 是個相當優秀的 IDE;其編輯器包括大量語言的語法標籤高亮顯示,雖然它只是個面向 Python 的工具。原始碼瀏覽器對瀏覽項目或模塊非常實用(表現在可導航原始碼和文檔行摘要中)。雖然沒有監視器,但調試器設計得很好。編輯器有優秀的命令自動完成和函數跳轉列表,但是沒有代碼合併。
  • python程式設計師嘔心瀝血整理 Django 優秀資源大全
    python-decouple, star:386 - 嚴格地將配置與代碼分離。django-environ, star:667 - 能讓你使用 12factor 的環境變量來配置你的 Django 應用。django-split-settings, star:131 - 將 Django 設置信息組織到多個文件和目錄中。
  • Django 官方推薦的姿勢:類視圖
    對處理首頁的視圖函數來說,雖然其處理的對象一個是文章,另一個是帖子,但是其處理的過程是非常類似的:首先是從資料庫取出文章或者帖子列表,然後將這些數據傳遞給模板並渲染模板。於是,django 把這些相同的邏輯代碼抽取了出來,寫成了一系列的通用視圖函數,即基於類的通用視圖(Generic Class Based View)。
  • R Markdown 簡介
    現在,再R Markdown的模板中,每個報告都包含製作圖形,表格,數字所需的代碼,作者可通過knit來自動完成更新。convert - convert 文件。你可以認為的用render作用到R Markdown 文件, 如: rmarkdown::render(). 上面的代碼渲染成HTML文件格式之後的結果如下圖。rmarkdown::render(),R markdown與RStudio深度合作 integrated into the RStudio IDE,因為,你可以通過按鍵來完成以上命令。開車了!
  • Python 資源大全中文版
    awesome-python 是 vinta 發起維護的 Python 資源列表,內容包括:Web框架、網絡爬蟲、網絡內容提取、模板引擎、資料庫、數據可視化、圖片處理、文本處理、自然語言處理、機器學習、日誌、代碼分析等。
  • Python 第三方庫大全看這一篇就夠了(1000+工具包)
    try:一個極其簡單的命令行工具,用來試用 python 庫。copier:用於呈現項目模板的庫和命令行實用程序。Invoke:用於管理面向 shell 的子進程,同時支持將可執行的 Python 代碼組織成命令行可調用的狀態。httpie:一個命令行 HTTP 客戶端,cURL 的替代品,易用性更好。iredis:支持自動補全和高亮顯示的 redis 命令行工具。