2016-08-17

Blogger中的代码高亮

昨天在blogger上写了第一篇文章,其中含有一些命令行、代码等,也没有用高亮特殊处理,看起来挺费劲的。
Blogger自带编辑器中不包含代码高亮功能,这是个弊端,wordpress通过一些插件可以做到,blogger好像并没有插件功能(但可以安装第三方的小工具、挂件),我于是Google一下,看看可不可以通过代码实现。
参考了diannaoxiaobai文章
可以连接第三方(google-code-prettify),通过远程调用实现。

不如干脆翻译翻译README,顺便学习一下。

1.进入HTML编辑界面,
添加一行代码
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
调用prettify。
这行代码可以进行自定义,官方甩出了下面的表格。

CGI parameterdefaultmeaning
autoload=(true, false)truerun automatically on page load
lang=...noneLoads 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=...noneSee the skin gallery. If specified multiple times, the first one to successfully load is used.
callback=js_identwindow.exports["js_ident"] will be called when prettyprinting finishes. If specified multiple times, all are called.
常用的是lang和skin。可以这样修改。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=js&amp;skin=desert"></script>
表明使用javascript,代码框的皮肤是Desert,其中皮肤可以在开发者提供的网址中浏览。

使用<pre class="prettyprint">...</pre>
即可使代码高亮,效果如下。
class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded tags.
}
同时有效地精简了html的长度。
另外注意,如果在“撰写”模式下继续书写,文字也会被视为代码,要从HTML模式中进行更改!

如果博文中含有不同语言的代码,可以按照如下格式书写代码。
<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
    "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
    "xhtml", "xml", "xsl".
</pre>
在lang- 后输入语言(按照上述形式),最初的那行html代码是不是要删除lang属性?

大概就是这样,现在我去对上一篇博文做修改。

没有评论:

发表评论