在Blogger 貼上程式碼一

如何在Blogger 網頁內，貼上如下圖美美的程式碼呢?一點也不困難，讓我們繼續看下去。



Step 1：
首先你要進入後台管理，在左下角點選版面配置，並 移到最尾端，在右下方處點選新增小工具。



Step 2：
在彈出視窗中，選取HTML/JavaScript


Step 3：
在設定HTML/JavaScript的內容方塊內貼入下面的程式碼。
<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:1000px;
line-height: 1.2em;
}
</style>

看起來應該像下圖這樣












Step 4：



接著複製下面的語法，並將要放置的程式碼放在區塊內。







<pre class="codeblock">
     貼上你的程式碼
</pre>











附註：



假如你的程式碼內包含<>，需要進行轉碼，你可以到這個網站將轉碼，再將轉碼過後的結果貼到上述區塊內。







轉碼網站







Step 5：



我們也可以安裝JavaScript讓他為我們的程式碼上色。



很簡單，在Step 2 中再新增HTML/JavaScript，並貼上下面的這段 JavaScript。


 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js">







<pre class="codeblock prettyprint">這裡可以插入你想放入的程式碼</pre>



























標籤：