使用 highlight.js 高亮博文中的代码

Method

将以下代码嵌入到blogger的html编辑页面即可。注意到其中的风格是hybrid.css。其他风格可以参考styles directory (注意在style名称前添加min标注，例如风格名为hybrid.css则引入时的名称为hybrid.min.css)

<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/hybrid.min.css" rel="stylesheet"> </link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script> 

1. 第一行href的值为代码高亮风格文件(.css)的路径，以上给出了当前版本(9.12.0)的hybrid风格的样式文件路径。可以修改hybrid.min.css为其他风格文件名称从而获得不同的高亮风格。
2. 第二行src的值为执行页面代码高亮操作的JavaScript脚本文件路径。
3. 第三行声明了高亮脚本在页面加载时启动，从而渲染页面内的所有代码块，按照指定样式进行高亮
注意事项：以上的两个链接中最好加上https:构成完整的url，以免无法加载css风格或js文件

Usage

使用时，在需要插入代码的地方以<pre><code>...</code></pre>包含代码块即可

Testing

以下给出一段Scrapy代码，采用了hybrid.css的风格，看起来比较舒服。其他风格预览可以在demo中查看，确定风格以后可以在styles directory中查看相应的名称，并修改引入的路径名称即可获得相应的高亮风格显示效果。

import scrapy

class WeatherSpider(scrapy.Spider):
    name = "yangzhongWeather"
 
    def start_requests(self):
        url = "http://lishi.tianqi.com/yangzhong/201501.html"
        yield scrapy.Request(url, self.parse)
 
    def parse(self, response):
        weathers = iter(response.css('div.tqtongji2 ul'))
        next(weathers)
        for weather in weathers:
            yield {
                "date": weather.css('li a::text').extract_first(),
                "high_degree": weather.css('li::text').extract()[0],
                "low_degree": weather.css('li::text').extract()[1],
                "weather": weather.css('li::text').extract()[2],
            }
  
        next_page = response.css('span.tqxiangqing a::attr(href)').extract()[-1]
        datemonth = str(next_page.split("/")[-1]) 
        if datemonth != "201609.html":
            yield scrapy.Request(next_page, callback=self.parse)
 

Custom

以上介绍了博客中插入代码段的方式，但是有时需要在文中(inline)插入代码，该议题等待更新... 对于inline模式的代码，可以直接使用<code>...</code>标签，但是默认情况下仅仅只是字体不同，样式上比较单一。而一般可以为inline模式的代码加上一个灰色的背景色块会比较美观，实现的方式是添加自定义的CSS。但是需要注意的是，由于highlight.js中的代码块标签是<pre><code>...</code></pre>层叠的形式，其中也包裹了<code>标签对，如果直接对<code>标签应用CSS，那么对于代码块同样被应用了CSS，这是不希望看到的。为了解决这一问题，可以为inline模式的标签对添加一个class标注，如：<code class="inline">...</code>，与此同时在自定义CSS中添加如下的代码段：

code.inline {
    background-color: #f5f5f5!important;
    border: 1px solid #ccc!important;
    padding: 0 5px!important;
    border-radius: 3px!important;
    margin: 1px 5px;
    vertical-align: middle;
    display: inline-block;
}

Tips

为了方便起见，不必要对每一篇博文都在其html页面中添加上述的三行代码；可以自定义blogger的主题，为html模板添加上述三行代码，即可为所有的博文启用相同的代码高亮风格。具体的操作如下：在blogger的主界面左侧选择“主题背景”--> “修改html”

在打开的html文件中最下方（其他地方也适用）插入上述代码，如下：

保存。使用该样式风格时，只需要为代码块加上<pre><code>...</code></pre> 即可。

Problems

以上Tips中可能会遇到一个问题：修改了blogger Template的html后无法保存（保存以后再回到Template会发现其html文件被重置了），这样就会导致以上代码插入不成功。这个是与模板相关的，有的模板可以成功保存修改，而有的不可以。解决的办法是，搜索Template的html文件，找到如下代码段

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> 

中的<true>改为<false>，如下

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'> 

Reference

1.highlight.js
2.Trouble saving template (edit HTML) - help!