用 Python-Markdown 和 google-prettify 来处理 Markdown 和代码高亮
用 Python-Markdown 和 google-prettify 来处理 Markdown 和代码高亮
python-markdown
这是Python中处理Markdown的一个库，可以把markdown语法转为html，如下:
import markdown
markdown_src = """
## Python Code:
print 'hello highlight'
"""
print markdown.markdown(src, extensions=["codehilite"])
# 输出html代码
# output: u'<h2>Python Code:</h2>\n<div class="codehilite"><pre><span></span>print 'hello highlight'\n</pre></div>'只是利用pre标签来做代码展示，就像我之前的文章那样。展示上来说并没有问题，只是贴到公众号上样式会错乱，因为微信不支持pre标签。
Google Prettify
这是Google出的一个代码高亮的前端库，Github地址：https://github.com/google/code-prettify。两种用法：
一、自动执行
在你的页面引入
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?"></script>后面有这个几个参数，我直接copy过来：
CGI parameter | default | meaning |
|---|---|---|
autorun=(true, false) | true | run automatically on page load |
lang=... | none | Loads the language handler for the given language which is usually the file extension for source files for that language. See the index of language handlers. If specified multiple times (?lang=css&lang=ml) then all are loaded. |
skin=... | none | See the skin gallery. If specified multiple times, the first one to successfully load is used. |
callback=js_ident | window.exports["js_ident"] will be called when prettyprinting finishes. If specified multiple times, all are called. |
页面引入这个资源后还需要一个配置，就是改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 markdown
config = {
'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