整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
showdown是一個(gè)基于Javascript編寫(xiě)的開(kāi)源Markdown和HTML相互轉(zhuǎn)換器，showdown可以用在客戶(hù)端（瀏覽器）或者服務(wù)端（nodejs）。shodown還支持原始規(guī)范中未定義為opt-in特性的“額外”語(yǔ)法。默認(rèn)情況下不會(huì)啟用新的語(yǔ)法元素，需要使用者通過(guò)配置啟用它們！
https://github.com/showdownjs/showdown
沒(méi)有硬依賴(lài)或特殊的安裝說(shuō)明，只需下載（或使用CDN）并將其包含在您的文件中。
開(kāi)箱即用，支持許多流行的Markdown風(fēng)格，如原生的、GFM、commonmark。其他特性，如表、元數(shù)據(jù)等，可以通過(guò)配置啟用。
在服務(wù)器端（nodejs）和客戶(hù)端（瀏覽器）中都可以使用
它很容易定制和擴(kuò)展，這意味著你可以添加新的語(yǔ)法或通過(guò)擴(kuò)展或配置修改它的行為
Showdown兼容新舊版本（如IE8+和nodejs0.12）。
用es5編寫(xiě)，意味著你可以按原樣在項(xiàng)目中使用它，而不需要轉(zhuǎn)換。
可以使用bower或者npm安裝使用
bower install showdownnpm install showdown也可以直接使用cdn直接引入以便于直接使用，以下便是線上demo，可實(shí)現(xiàn)邊寫(xiě)邊預(yù)覽
showdown的優(yōu)勢(shì)就在于其強(qiáng)大的功能和其非常強(qiáng)的兼容性，而且使用也非常簡(jiǎn)單，通過(guò)很少的配置就能實(shí)現(xiàn)很多豐富的功能！具體如何使用可參考官方文檔，官方文檔就是在一個(gè)實(shí)時(shí)預(yù)覽的編輯器中進(jìn)行展現(xiàn)的！
markdown中寫(xiě)下你的文章，并使用Python將它們轉(zhuǎn)換成HTML-作者Florian Dahlitz，于2020年5月18日（15分鐘）
介紹
幾個(gè)月前，我想開(kāi)通自己的博客，而不是使用像Medium這樣的網(wǎng)站。這是一個(gè)非?；A(chǔ)的博客，所有的文章都是HTML形式的。然而，有一天，我突然產(chǎn)生了自己編寫(xiě)Markdown到HTML生成器的想法，最終這將允許我用markdown來(lái)編寫(xiě)文章。此外，為它添加諸如估計(jì)閱讀時(shí)間之類(lèi)的擴(kuò)展特性會(huì)更容易。長(zhǎng)話(huà)短說(shuō)，我實(shí)現(xiàn)了自己的markdown到HTML生成器，我真的很喜歡它！
在本系列文章中，我想向您展示如何構(gòu)建自己的markdown到HTML生成器。該系列由三部分組成：
第一部分（本文）介紹了整個(gè)管線的實(shí)現(xiàn)。
第二部分通過(guò)一個(gè)模塊擴(kuò)展了實(shí)現(xiàn)的管線，該模塊用于計(jì)算給定文章的預(yù)計(jì)閱讀時(shí)間。
第三部分演示如何使用管線生成自己的RSS摘要。
這三部分中使用的代碼都可以在GitHub上找到。
備注：我的文章中markdown到HTML生成器的想法基于Anthony Shaw文章中的實(shí)現(xiàn)。
項(xiàng)目構(gòu)建
為了遵循本文的內(nèi)容，您需要安裝幾個(gè)軟件包。我們把它們放進(jìn)requirements.txt文件。
Markdown是一個(gè)包，它允許您將markdown代碼轉(zhuǎn)換為HTML。之后我們用Flask產(chǎn)生靜態(tài)文件。
但在安裝之前，請(qǐng)創(chuàng)建一個(gè)虛擬環(huán)境，以避免Python安裝出現(xiàn)問(wèn)題：
激活后，您可以使用pip安裝requirements.txt中的依賴(lài)。
很好！讓我們創(chuàng)建幾個(gè)目錄來(lái)更好地組織代碼。首先，我們創(chuàng)建一個(gè)app目錄。此目錄包含我們提供博客服務(wù)的Flask應(yīng)用程序。所有后續(xù)目錄都將在app目錄內(nèi)創(chuàng)建。其次，我們創(chuàng)建一個(gè)名為posts的目錄。此目錄包含要轉(zhuǎn)換為HTML文件的markdown文件。接下來(lái)，我們創(chuàng)建一個(gè)templates目錄，其中包含稍后使用Flask展示的模板。在templates目錄中，我們?cè)賱?chuàng)建兩個(gè)目錄：
posts包含生成的HTML文件，這些文件與應(yīng)用程序根目錄中posts目錄中的文件相對(duì)應(yīng)。
shared包含在多個(gè)文件中使用的HTML文件。
此外，我們還創(chuàng)建了一個(gè)名為services的目錄。該目錄將包含我們?cè)贔lask應(yīng)用程序中使用的模塊，或者為它生成某些東西。最后，創(chuàng)建一個(gè)名為static的目錄帶有兩個(gè)子目錄images和css。自定義CSS文件和文章的縮略圖將存儲(chǔ)在此處。
您的最終項(xiàng)目結(jié)構(gòu)應(yīng)如下所示：
令人驚嘆！我們完成了一般的項(xiàng)目設(shè)置。我們來(lái)看看Flask的設(shè)置。
Flask設(shè)置
路由
我們?cè)谏弦还?jié)安裝了Flask。但是，我們?nèi)匀恍枰粋€(gè)Python文件來(lái)定義用戶(hù)可以訪問(wèn)的端點(diǎn)。在app目錄中創(chuàng)建main.py并將以下內(nèi)容復(fù)制到其中。
該文件定義了一個(gè)具有兩個(gè)端點(diǎn)的基礎(chǔ)版Flask應(yīng)用程序。用戶(hù)可以使用/route訪問(wèn)第一個(gè)端點(diǎn)返回索引頁(yè)，其中列出了所有文章。
第二個(gè)端點(diǎn)是更通用的端點(diǎn)。它接受post的名稱(chēng)并返回相應(yīng)的HTML文件。
接下來(lái)，我們通過(guò)向app目錄中添加一個(gè)__init__.py，將其轉(zhuǎn)換為一個(gè)Python包。此文件為空。如果您使用UNIX計(jì)算機(jī)，則可以從項(xiàng)目的根目錄運(yùn)行以下命令：
模板
現(xiàn)在，我們創(chuàng)建兩個(gè)模板文件index.html以及l(fā)ayout.html，都存儲(chǔ)在templates/shared目錄中。這個(gè)layout.html模板將用于單個(gè)博客條目，而index.html模板用于生成索引頁(yè)，從中我們可以訪問(wèn)每個(gè)帖子。讓我們從index.html模板開(kāi)始。
它是一個(gè)基本的HTML文件，其中有兩個(gè)元標(biāo)記、一個(gè)標(biāo)題和兩個(gè)樣式表。注意，我們使用一個(gè)遠(yuǎn)程樣式表和一個(gè)本地樣式表。遠(yuǎn)程樣式表用于啟用Bootstrap[1]類(lèi)。第二個(gè)是自定義樣式。我們晚點(diǎn)再定義它們。
HTML文件的主體包含一個(gè)容器，其中包含Jinja2[2]邏輯，用于為每個(gè)post生成Bootstrap卡片[3]。您是否注意到我們不直接基于變量名訪問(wèn)這些值，而是需要將[0]添加到其中？這是因?yàn)槲恼轮薪馕龅脑獢?shù)據(jù)是列表。實(shí)際上，每個(gè)元數(shù)據(jù)元素都是由單一元素組成的列表。我們稍后再看。到目前為止，還不錯(cuò)。讓我們看看layout.html模板。
如你所見(jiàn)，它比前一個(gè)短一點(diǎn)，簡(jiǎn)單一點(diǎn)。文件頭與index.html文件很相似，除了我們有不同的標(biāo)題。當(dāng)然，我們可以共用一個(gè)模板，但是我不想讓事情變得更復(fù)雜。
body中的容器僅定義一個(gè)h1標(biāo)記。然后，我們提供給模板的內(nèi)容被插入并呈現(xiàn)。
樣式
正如上一節(jié)所承諾的，我們將查看自定義CSS文件style.css. 我們?cè)趕tatic/css中找到該文件，并根據(jù)需要自定義頁(yè)面。下面是我們將用于基礎(chǔ)示例的內(nèi)容：
我不喜歡Bootstrap中blockquotes的默認(rèn)外觀，所以我們?cè)谧髠?cè)添加了一點(diǎn)間距和邊框。此外，blockquote段落底部的頁(yè)邊空白將被刪除。不刪除的話(huà)看起來(lái)很不自然。
最后但并非最不重要的是，左右兩邊的填充被刪除。由于兩邊都有額外的填充，縮略圖沒(méi)有正確對(duì)齊，所以在這里刪除它們。
到現(xiàn)在為止，一直都還不錯(cuò)。我們完成了關(guān)于Flask的所有工作。讓我們開(kāi)始寫(xiě)一些帖子吧！
寫(xiě)文章
正如標(biāo)題所承諾的，你可以用markdown寫(xiě)文章-是的！在寫(xiě)文章的時(shí)候，除了保證正確的markdown格式外，沒(méi)有其他需要注意的事情。
在完成本文之后，我們需要在文章中添加一些元數(shù)據(jù)。此元數(shù)據(jù)添加在文章之前，并由三個(gè)破折號(hào)分隔開(kāi)來(lái)---。下面是一個(gè)示例文章（post1.md）的摘錄：
注意：您可以在GitHub庫(kù)的app/posts/post1.md中找到完整的示例文章。
在我們的例子中，元數(shù)據(jù)由標(biāo)題、副標(biāo)題、類(lèi)別、發(fā)布日期和index.html中卡片對(duì)應(yīng)縮略圖的路徑組成.
我們?cè)贖TML文件中使用了元數(shù)據(jù)，你還記得嗎？元數(shù)據(jù)規(guī)范必須是有效的YAML。示例形式是鍵后面跟著一個(gè)冒號(hào)和值。最后，冒號(hào)后面的值是列表中的第一個(gè)也是唯一的元素。這就是我們通過(guò)模板中的索引運(yùn)算符訪問(wèn)這些值的原因。
假設(shè)我們寫(xiě)完了文章。在我們可以開(kāi)始轉(zhuǎn)換之前，還有一件事要做：我們需要為我們的帖子生成縮略圖！為了讓事情更簡(jiǎn)單，只需從你的電腦或網(wǎng)絡(luò)上隨機(jī)選取一張圖片，命名它為placeholder.jpg并把它放到static/images目錄中。GitHub存儲(chǔ)庫(kù)中兩篇文章的元數(shù)據(jù)包含一個(gè)代表圖像的鍵值對(duì)，值是placeholder.jpg。
注意：在GitHub存儲(chǔ)庫(kù)中，您可以找到我提到的兩篇示例文章。
markdown到HTML轉(zhuǎn)換器
最后，我們可以開(kāi)始實(shí)現(xiàn)markdown to HTML轉(zhuǎn)換器。因此，我們使用我們?cè)陂_(kāi)始時(shí)安裝的第三方包Markdown。我們先創(chuàng)建一個(gè)新模塊，轉(zhuǎn)換服務(wù)將在其中運(yùn)行。因此，我們?cè)趕ervice目錄中創(chuàng)建了converter.py。我們一步一步看完整個(gè)腳本。您可以在GitHub存儲(chǔ)庫(kù)中一次查看整個(gè)腳本。
首先，我們導(dǎo)入所需的所有內(nèi)容并創(chuàng)建幾個(gè)常量：
ROOT指向我們項(xiàng)目的根。因此，它是包含app的目錄。
POSTS_DIR是以markdown編寫(xiě)的文章的路徑。
TEMPLATE_DIR分別指向?qū)?yīng)的templates目錄。
BLOG_TEMPLATE_文件存儲(chǔ)layout.html的路徑。
INDEX_TEMPLATE_FILE是index.html
BASE_URL是我們項(xiàng)目的默認(rèn)地址，例如。https://florian-dahlitz.de.默認(rèn)值（如果不是通過(guò)環(huán)境變量DOMAIN提供的話(huà)）是http://0.0.0.0：5000。
接下來(lái)，我們創(chuàng)建一個(gè)名為generate_entries的新函數(shù)。這是我們定義的唯一一個(gè)轉(zhuǎn)換文章的函數(shù)。
在函數(shù)中，我們首先獲取POSTS_DIR目錄中所有markdown文件的路徑。pathlib的awesome glob函數(shù)幫助我們實(shí)現(xiàn)它。
此外，我們定義了Markdown包需要使用的擴(kuò)展。默認(rèn)情況下，本文中使用的所有擴(kuò)展都隨它的安裝一起提供。
注意：您可以在文檔[4]中找到有關(guān)擴(kuò)展的更多信息。
此外，我們實(shí)例化了一個(gè)新的文件加載程序，并創(chuàng)建了一個(gè)在轉(zhuǎn)換項(xiàng)目時(shí)使用的環(huán)境。隨后，將創(chuàng)建一個(gè)名為all_posts的空列表。此列表將包含我們處理后的所有帖子。現(xiàn)在，我們進(jìn)入for循環(huán)并遍歷POSTS_DIR中找到的所有文章。
我們啟動(dòng)for循環(huán)，并打印當(dāng)前正在處理的post的路徑。如果有什么東西出問(wèn)題了，這尤其有用。然后我們就知道，哪個(gè)文章的轉(zhuǎn)換失敗了。
接下來(lái)，我們?cè)谀J(rèn)url之后增加一部分。假設(shè)我們有一篇標(biāo)題為“面向初學(xué)者的Python”的文章。我們將文章存儲(chǔ)在一個(gè)名為python-for-beginners.md,的文件中，因此生成的url將是http://0.0.0.0:5000/posts/python-for-beginners。
變量url_html存儲(chǔ)的字符串與url相同，只是我們?cè)谀┪蔡砑恿?html。我們使用此變量定義另一個(gè)稱(chēng)為target_file.的變量。變量指向存儲(chǔ)相應(yīng)HTML文件的位置。
最后，我們定義了一個(gè)變量md，它表示markdown.Markdown的實(shí)例，用于將markdown代碼轉(zhuǎn)換為HTML。您可能會(huì)問(wèn)自己，為什么我們沒(méi)有在for循環(huán)之前實(shí)例化這個(gè)實(shí)例，而是在內(nèi)部實(shí)例化。當(dāng)然，對(duì)于我們這里的小例子來(lái)說(shuō)，這沒(méi)有什么區(qū)別（只是執(zhí)行時(shí)間稍微短一點(diǎn)）。但是，如果使用諸如腳注之類(lèi)的擴(kuò)展來(lái)使用腳注，則需要為每個(gè)帖子實(shí)例化一個(gè)新實(shí)例，因?yàn)槟_注添加后就不會(huì)從此實(shí)例中刪除。因此，如果您的第一篇文章使用了一些腳注，那么即使您沒(méi)有明確定義它們，所有其他文章也將具有相同的腳注。
讓我們轉(zhuǎn)到for循環(huán)中的第一個(gè)with代碼塊。
實(shí)際上，with代碼塊打開(kāi)當(dāng)前post并將其內(nèi)容讀入變量content。之后調(diào)用_md.convert將以markdown方式寫(xiě)入的內(nèi)容轉(zhuǎn)換為HTML。隨后，env環(huán)境根據(jù)提供的模板BLOG_TEMPLATE_FILE（即layout.html如果你還記得的話(huà)）渲染生成的HTML。
第二個(gè)with 代碼塊用于將第一個(gè)with 代碼塊中創(chuàng)建的文檔寫(xiě)入目標(biāo)文件。
以下三行代碼從元數(shù)據(jù)中獲取發(fā)布日期（被發(fā)布的日期），將其轉(zhuǎn)換為正確的格式（RFC 2822），并將其分配回文章的元數(shù)據(jù)。此外，生成的post_dict被添加到all_posts列表中。
我們現(xiàn)在出了for循環(huán)，因此，我們遍歷了posts目錄中找到的所有posts并對(duì)其進(jìn)行了處理。讓我們看看generate_entries函數(shù)中剩下的三行代碼。
我們按日期倒序?qū)ξ恼逻M(jìn)行排序，所以首先顯示最新的文章。隨后，我們將文章寫(xiě)到模板目錄一個(gè)新創(chuàng)建的index.html文件中。別把index.html錯(cuò)認(rèn)為templates/shared目錄中的那個(gè)。templates/shared目錄中的是模板，這個(gè)是我們要使用Flask服務(wù)的生成的。
最后我們?cè)诤瘮?shù)generate_entries之后添加以下if語(yǔ)句。
這意味著如果我們通過(guò)命令行執(zhí)行文件，它將調(diào)用generate_entries函數(shù)。
太棒了，我們完成了converter.py腳本！讓我們從項(xiàng)目的根目錄運(yùn)行以下命令來(lái)嘗試：
您應(yīng)該看到一些正在轉(zhuǎn)換的文件的路徑。假設(shè)您編寫(xiě)了兩篇文章或使用了GitHub存儲(chǔ)庫(kù)中的兩篇文章，那么您應(yīng)該在templates目錄中找到三個(gè)新創(chuàng)建的文件。首先是index.html，它直接位于templates目錄中，其次是templates/posts目錄中的兩個(gè)HTML文件，它們對(duì)應(yīng)于markdown文件。
最后啟動(dòng)Flask應(yīng)用程序并轉(zhuǎn)到http://0.0.0.0:5000。
總結(jié)
太棒了，你完成了這個(gè)系列的第一部分！在本文中，您已經(jīng)學(xué)習(xí)了如何利用Markdown包創(chuàng)建自己的Markdown to HTML生成器。您實(shí)現(xiàn)了整個(gè)管線，它是高度可擴(kuò)展的，您將在接下來(lái)的文章中看到這一點(diǎn)。
希望你喜歡這篇文章。一定要和你的朋友和同事分享。如果你還沒(méi)有，考慮在Twitter上關(guān)注我@DahlitzF或者訂閱我的通知，這樣你就不會(huì)錯(cuò)過(guò)任何即將發(fā)表的文章。保持好奇心，不斷編碼！
參考文獻(xiàn)
Bootstrap （http://getbootstrap.com/）
Primer on Jinja Templating （https://realpython.com/primer-on-jinja-templating/）
Bootstrap Card （https://getbootstrap.com/docs/4.4/components/card/）
Python-Markdown Extensions （https://python-markdown.github.io/extensions/）
Tweet
英文原文：https://florian-dahlitz.de/blog/build-a-markdown-to-html-conversion-pipeline-using-python
譯者：阿布銩
器之心報(bào)道
機(jī)器之心編輯部
只要你有純文本編輯器，加上一條語(yǔ)句，瞬間它就可以成為 Markdown 編輯器。
Markdeep 是一個(gè)用來(lái)寫(xiě)純文本的插件，它能以 Markdown 的語(yǔ)法與渲染方式純文本，并在網(wǎng)頁(yè)上展示。同時(shí)，除了 Markdown 語(yǔ)法，Markdeep 還額外支持圖表、數(shù)學(xué)方程等擴(kuò)展能力。
項(xiàng)目主頁(yè)：https://casual-effects.com/markdeep/
我們先看看效果，如下左邊是純文本編輯器的編輯頁(yè)面，右邊是在瀏覽器上的渲染效果：
Markdeep 非常容易使用，它也不需要安裝插件或聯(lián)網(wǎng)。如上所示只要在純文本最后加上「<!—Markdeep→」那一行的表達(dá)式，它就可以變成一個(gè)地道的 Markdown 編輯器。Markdeep 不需要額外安裝任何東西，也不需要導(dǎo)出、編譯等雜七雜八的過(guò)程。
看著 Markdeep 很簡(jiǎn)單，但它的功能卻不少，一點(diǎn)也不遜色于 Typora 等正統(tǒng)的 Markdown 編輯器。不論我們是寫(xiě)項(xiàng)目的 README 文檔、實(shí)驗(yàn)報(bào)告，還是要做 PPT 或?qū)懻撐?，它都能滿(mǎn)足。該項(xiàng)目提供了很多示例，例如生成的 PPT 是什么樣的，后文會(huì)具體展示。
開(kāi)源代碼
Markdeep 是開(kāi)源的，所以可以直接下載和修改源代碼文件 markdeep.js。整個(gè)編輯器就是一個(gè) JavaScript 腳本，上面定義了各種格式與渲染方式。作者表示，目前他正研究該如何有效降低腳本文件大小。
用于表格處理的部分代碼，整個(gè)腳本有超過(guò) 5000 行代碼。
腳本源碼地址：https://casual-effects.com/markdeep/latest/markdeep.js
作者表示，這個(gè)項(xiàng)目本來(lái)就是一個(gè)業(yè)余項(xiàng)目，它并不會(huì)有完整的技術(shù)支持。不過(guò)只要提交的 Bug 足夠具體，作者都會(huì)完善它。此外，該項(xiàng)目還會(huì)經(jīng)常加入一些新特性，從 2015 年 10 月份的第一版，到今年 2 月份的最新版，這個(gè)編輯器已經(jīng)維護(hù)了很長(zhǎng)時(shí)間。
Markdeep 怎么用
如果你需要?jiǎng)?chuàng)建一個(gè) Markdeep 的文件，只需要打開(kāi)任意一個(gè)文本編輯器，然后開(kāi)始編輯。完成文本編輯工作后，只需要在其底部寫(xiě)下一個(gè)簡(jiǎn)單的代碼就行了。然后，將這個(gè)文檔保存為純文本文件，使用 .md.html 為擴(kuò)展名。
<!-- Markdeep: --><style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style><script src="markdeep.min.js" charset="utf-8"></script><script src="https://casual-effects.com/markdeep/latest/markdeep.min.js" charset="utf-8"></script><script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>如果你希望在源文檔中使用 Unicode，則需要在文檔頂部先加上這句話(huà)：
<meta charset="utf-8">想要看看效果？你可以將文本拖入瀏覽器或雙擊它。即使網(wǎng)絡(luò)離線也可以查閱文檔。如果不想因?yàn)殡x線而失去格式，可以將 markdeep.min.js 文件和文檔保存在一個(gè)文件夾中。
如果想要看看 Markdeep 原始文本，在文件 URL 最后加上「?noformat」即可。
上手示例
小編隨手測(cè)試了幾個(gè)典型 Markdown 語(yǔ)法，比如：代辦列表、自動(dòng)鏈接、表格、內(nèi)聯(lián)圖片、代碼。與此同時(shí)，LaTeX 的數(shù)學(xué)表達(dá)式和圖形也能直接設(shè)計(jì)，而不需要任何插件。具體效果可參考：
簡(jiǎn)而言之，配備完善，對(duì)于熟悉 Markdown 的小伙伴來(lái)說(shuō)，用起來(lái)會(huì)十分順手及方便。這意味著，在有網(wǎng)的情況下，隨意拎一個(gè)文本編輯器后，就再也沒(méi)有人能攔得了你使用 Markdown 了。與此同時(shí)，時(shí)時(shí)預(yù)覽效果也非常簡(jiǎn)便，只需要在文本編輯器里修改，瀏覽器中刷新下便可呈現(xiàn)最新效果。
Markdeep 能干什么
只要是 Markdown 支持的，Markdeep 就能夠支持，它在業(yè)界和學(xué)術(shù)界能得到廣泛使用。如下所示，各種題材與格式的文檔都能用 Markdeep 完成：
看起來(lái) Markdeep 似乎什么都能做，項(xiàng)目作者同樣也展示了這些方面的效果圖：
Markdeep 制作的 PPT。
Markdeep 制作的個(gè)人簡(jiǎn)歷。
總之，除了使用方便、展示炫酷，Markdeep 的功能也是非常強(qiáng)大。正如其它開(kāi)發(fā)者所強(qiáng)調(diào)的，Markdeep 是能制作簡(jiǎn)單圖表的 Markdown 工具，它以一種「ASCII Art」的方式用純文本制作出圖形，并且不用渲染也非常明晰。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
