讓Blogger的程式碼上色

讓Blogger的程式碼上色

作者： Tshuà Bûn-lī (蔡文莉) - 7月 18, 2014

在前一篇，可以看見程式碼是彩色的。
這是用到Google自己開發的Prettify script，將程式碼上色。

加入Prettify script到網誌管理介面

到Blogger網誌管理介面「我的網誌」→「版面配置」→「新增小工具」的「HTML/JavaScript」

貼上這行程式碼

<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

在文章→撰寫html，將程式碼加上CSS樣式prettyprint

原本在Blogger的html如下：

<pre class="codeblock">
<body ng-app>
 <div>
  <p>1 + 4 = {{ 1+4 }}</p>
  <input ng-model="ttt"/>
  <p>The input is: {{ttt}}</p>
 </div>
</body>
</pre>

加上 prettify後

<pre class="codeblock prettyprint">
<body ng-app>
 <div>
  <p>1 + 4 = {{ 1+4 }}</p>
  <input ng-model="ttt"/>
  <p>The input is: {{ttt}}</p>
 </div>
</body>
</pre>

留言