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!
如图所示，可以对博客的页面、布局、主题背景(Template)、设置等进行个性化的修改。而其中，主题背景提供了“自定义”和“修改html”两种主要的修改方式。
其中自定义方式中包含对主题、背景、各个组件的样式、字体等进行修改。
注意，其中的“高级”下有添加css的功能，可以作为对页面样式的补充控制，下面将会介绍简单的应用。
