blogger中嵌入程式碼 : 使用Google code prettify和CSS block

by •12月 27, 2019•0 Comments

說明

想要把一段程式碼漂亮的呈現在網頁上，直覺可能是使用軟體調整顏色與排版，但實際上還是會讓程式碼和內文混在一起，沒有真的很好的區隔。其實只要使用Google Code Prettify和CSS Block，往後要嵌入程式碼只要用HTML標籤就可以達到很美觀的效果了。

使用方法

修改程式碼

在</head>前加入以下程式碼

<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'/>
<style>
 .post .codeblock {
   display: block; /* fixes a strange ie margin bug */
   font-family: Courier New;
   font-size: 10pt;
   overflow:auto;
   background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
   border: 1px solid #ccc;
   padding: 10px 10px 10px 21px;
   max-height:200px;
   line-height: 1.2em;
 }
</style>

編輯文章

  1. 新增文章時，以HTML模式
  2. 在程式碼前加<pre class...><code class...>
  3. 程式碼後加</code></pre>
  4. 範例如下
<pre class="codeblock"><code class="prettyprint">
class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
  // will not interfere with embedded tags.
}
</code></pre>
<