the5fire的技术博客

关注python、vim、linux、web开发和互联网--life is short, we need python.


用Python-Markdown和google-prettify来处理Markdown和代码高亮

作者:the5fire | 标签:       | 发布:2017-04-06 3:21 p.m. | 阅读量: 1793, 931

本来我是计划用Python搞定代码高亮这个事的,但是始终没找到方案,只好用js来做了。

由来

之前在@董伟明的一个群里讨论过写公众号用什么编辑器好,忘了当时谁推荐了这个在线的markdown编辑器:http://md.phodal.com/,于是就一直在用,挺好用的。只是每次都有打开别人的页面还是不太习惯,毕竟像多说这样的公司都可能停止服务,更别说个人了。

昨天看到知乎上@董伟明的一篇文章Python技术分享的乱象,想到现在这么多人都在知乎上写技术文章,良莠不齐,或许我也应该上去开个专栏,同步些东西过去,让文章/观点接受更多人的review,也给大家提供更多内容可参考。前几天大神@赖永浩也到知乎开了专栏:某外包公司老板的呢喃,说明现在知乎这个平台已经有足够的诱惑了。建议广大Python程序员都可以移步过去,@董伟明是一个很好的例子。

关于《Python技术分享的乱象》我建议初学者去看看,避免被收智商税。当然,也要“慎思之, 明辨之”,没有绝对的对与错,只能说保持谦卑,保持怀疑。

给技术分享者的建议是,对于非自己亲身实践过的内容,不要那么言之凿凿,说的跟自己真做过似得。经验少不可怕,怕的是管中窥豹,然后大言不惭。

既然又要打算多维护一个平台,那么就得想想怎么玩了。之前的逻辑是写一个markdown的文章,然后贴到博客,再去那个微信编辑器上处理下,贴到微信,如果再加一个知乎的话要就得再贴一个地方。微信公众平台和知乎发帖比较简单,就是需要配图。于是简单的做法就是在博客写完一篇文章,排版好,直接在博客页面copy,然后粘贴到两个平台,上传配图。

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 &#39;hello highlight&#39;\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

总结

这样处理后就方便了,写完文章,预览,样式没问题就点下copy,然后贴到公众号和知乎上。


----EOF-----

扫码关注,或者搜索微信公众号:码农悟凡


其他分类: