用Python-Markdown和google-prettify來處理Markdown和代碼高亮

01-25

本來我是計劃用Python搞定代碼高亮這個事的，但是始終沒找到方案，只好用js來做了。

由來

之前在@董偉明的一個群里討論過寫公眾號用什麼編輯器好，忘了當時誰推薦了這個在線的markdown編輯器：Markdown Wechat Public，於是就一直在用，挺好用的。只是每次都有打開別人的頁面還是不太習慣，畢竟像多說這樣的公司都可能停止服務，更別說個人了。

昨天看到知乎上@董偉明的一篇文章Python技術分享的亂象，想到現在這麼多人都在知乎上寫技術文章，良莠不齊，或許我也應該上去開個專欄，同步些東西過去，讓文章/觀點接受更多人的review，也給大家提供更多內容可參考。前幾天大神@賴永浩也到知乎開了專欄：某外包公司老闆的呢喃，說明現在知乎這個平台已經有足夠的誘惑了。建議廣大Python程序員都可以移步過去，@董偉明是一個很好的例子。

關於《Python技術分享的亂象》我建議初學者去看看，避免被收智商稅。當然，也要「慎思之, 明辨之」，沒有絕對的對與錯，只能說保持謙卑，保持懷疑。
給技術分享者的建議是，對於非自己親身實踐過的內容，不要那麼言之鑿鑿，說的跟自己真做過似得。經驗少不可怕，怕的是管中窺豹，然後大言不慚。

既然又要打算多維護一個平台，那麼就得想想怎麼玩了。之前的邏輯是寫一個markdown的文章，然後貼到博客，再去那個微信編輯器上處理下，貼到微信，如果再加一個知乎的話要就得再貼一個地方。微信公眾平台和知乎發帖比較簡單，就是需要配圖。於是簡單的做法就是在博客寫完一篇文章，排版好，直接在博客頁面copy，然後粘貼到兩個平台，上傳配圖。

python-markdown

這是Python中處理Markdown的一個庫，可以把markdown語法轉為html，如下:

import markdownmarkdown_src = """## Python Code: print "hello highlight""""print markdown.markdown(src, extensions=["codehilite"])# 輸出html代碼# output: u"<h2>Python Code:</h2> <div class="codehilite"><pre><span></span>print 'hello highlight' </pre></div>"

只是利用pre標籤來做代碼展示，就像我之前的文章那樣。展示上來說並沒有問題，只是貼到公眾號上樣式會錯亂，因為微信不支持pre標籤。

Google Prettify

這是Google出的一個代碼高亮的前端庫，Github地址：google/code-prettify。兩種用法：

一、自動執行

在你的頁面引入

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?"></script>

後面有這個幾個參數，我直接copy過來：

頁面引入這個資源後還需要一個配置，就是改pre標籤的class為：class=」prettyprint linenums」，linenums是展示行號用的class。

這種方式下js會根據參數自動載入樣式。

二、手動載入

頁面引入配置:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.js"></script>

還需要引入樣式文件:

<link href="https://cdn.rawgit.com/google/code-prettify/master/loader/skins/desert.css" rel="stylesheet">

頁面載入完之後，手動觸發渲染代碼的邏輯：

$("document").ready(function () { PR.prettyPrint();});

整合

思路其實是這樣，python markdown的庫只用來處理markdown格式，代碼渲染為pre即可，然後用prettify在前端高亮代碼。markdown處理部分的代碼如下，定義pre標籤的class以及不使用pygments處理代碼.

import markdownconfig = { "codehilite": { "use_pygments": False, "css_class": "prettyprint linenums", }}content_html = markdown.markdown(content, extensions=["codehilite"], extension_configs=config)

這樣得到前端代碼部分的展示為<pre class="prettyprint linenums"><code>代碼部分</code></pre>。

之後頁面引入樣式和js，如上一節的二、手動載入。

不過如果想要能夠貼到微信中保持樣式，還需要引入phodal的一個樣式文件: http://md.phodal.com/css/wechat-fix.css

總結

這樣處理後就方便了，寫完文章，預覽，樣式沒問題就點下copy，然後貼到公眾號和知乎上。

掃碼關注,或者搜索微信公眾號：碼農悟凡