【网页编辑】Blogger程式码行号显示，使用code-prettify

由于要在Blogger贴上程式码的缘故，关于显示行号，google搜寻了很多内容。加上自己本身不是摸前端的，只是想找个简便的方法来显示程式码行号。

在此使用code-prettify

code-prettify网址

STEP1：

进入版面配置，点选「+新增小工具」

STEP2：

选择「HTML JavaScript工具」

STEP3：

3-1. 标题随意命名一个名称，如：prog_linenum

3-2.贴上code-prettify的cdn网址：

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

完毕后按「储存」

STEP4：

最后记得按下右下方的储存，以储存版面。

至此，第一阶段设定完毕。

接下来就可以新增文章，切换到「HTML检视」，插入下列html码：

<pre class="prettyprint linenums">...程式码...</pre>

示範程式码，图片1，程式码超出範围会溢出。

示範程式码，图片2，程式码一列到底，也没有卷轴。

注意：

程式码用<pre></pre>包起来就好，有些网站上还有在<pre>内包上<code>，但测试结果会发觉行数会计算错误，以及灰、白相隔的背景显示也会错乱。

如下图所示：

接下来就是要进行第二阶段设定，主要是解决文字超出版面、没有卷轴问题

STEP1：

进入主题设定，找一些资料，都会建议版面使用Simple样式，在此，也是用网站建议的方式。

STEP2：

按下自订旁的下拉箭头，选择编辑HTML

找寻<style type='text/css'>的地方。由于有快千行的程式码，且使用网页的搜寻是找不到的。我的方式是把它贴到文字编辑器，如Notepad++，然后搜寻text/css，利用Notepad++显示的行数对应到Blogger HTML编辑器的行数。

所找出的位置处

插入下列CSS程式码：

pre.prettyprint{width: auto;overflow: auto;max-height: 600px}

由于<style>本身有些程式码已存在，所以新增的CSS程式码把它插在</style>前方。如下图所示：

程式码贴完后，记得按下 HTML编辑器右上方的储存钮。

最后，程式码画面行号正常显示、且有卷轴。

预设行号显示为每隔五行，如果要每行显示，则必须在刚设定的style中，再添加程式码。

li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8 {   list-style-type: decimal;}

结果如下：