Blogger - Google Blogger 顯示程式碼

現在的blog真的是太好用了
想要什麼套件會添加會使用
就完美了 😎




最近想說要添加程式碼片段
但是為何其他人的blog的程式碼片段都比較美咧
可參考以下步驟試試看

◎　Blogger後台/網站配置/新增小工具，選擇「HTML/JavaScript」的「+」

◎　開啟以下的畫面，標題可以自定義，內容貼下以下片段，最後「儲存」

<style>

pre.code {

display: block;

overflow: auto;

min-height: 30px;

max-height:800px;

padding: 0 0 0 11px;

border: 1px solid #ccc;

background: #f8f8ff url("data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==") left top repeat-y;

}

code.prettyprint {

line-height: 1.2em;

margin: 1px;

}

</style>

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

最後只要在blog內使用程式碼片段，就可以把程式碼標裝的漂漂啦 😆

<pre class="code"><code class="prettyprint linenums">要美化的程式碼放這</code></pre>

如果想要更美麗的樣式，就自己改code囉 💪