轉貼自: https://pjchender.blogspot.com/2015/03/blogger.html
有時候，我們會想在文章中插入語法，讓其他人可以比較清楚的瞭解，過去我常常是透過截圖的方式，但這麼做的缺點是，對方並不能直接複製貼上，那麼我們要怎麼在文章中插入語法呢？
首先在版面配置區插入HTML/JavaScript小工具的方式
STEP 1：
STEP 2：
STEP 3：
STEP 4：接著在HTML/JavaScript中貼入以下語法
在小工具中貼入以下程式碼
如圖所示
STEP 5：
接著只要把想要放在code裡面的語法用，開頭用：
這樣就可以了
STEP 6：當程式碼中包含「<>」時，需轉碼
如果程式碼中包含方角時，需要先把原本的程式碼轉碼，透過這個網站即可以輕易完成。
補充：自動將程式碼上色
閱讀更多 »
有時候，我們會想在文章中插入語法，讓其他人可以比較清楚的瞭解，過去我常常是透過截圖的方式，但這麼做的缺點是，對方並不能直接複製貼上，那麼我們要怎麼在文章中插入語法呢？
像這樣：<pre class="codeblock prettyprint"> </pre>
首先在版面配置區插入HTML/JavaScript小工具的方式
STEP 1：
STEP 2：
STEP 3：
STEP 4：接著在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 5：
接著只要把想要放在code裡面的語法用，開頭用：
<pre class="codeblock ">結尾用這個:
</pre>像是這樣
<pre class="codeblock"> 中間可以插入你想放入的程式碼 </pre>
這樣就可以了
STEP 6：當程式碼中包含「<>」時，需轉碼
如果程式碼中包含方角時，需要先把原本的程式碼轉碼，透過這個網站即可以輕易完成。
補充：自動將程式碼上色
我們除了可以用上方的色盤將自己的程式碼套色外，
像這樣
我們也可以另外安裝一段JavaScript讓他自己幫我們上色，
安裝的方法很簡單，一樣透過最上面所說的方法新增「HTML/JavaScript」，新增下述這段語法：
像這樣
結果會像這樣
<pre class="codeblock ">
我們也可以另外安裝一段JavaScript讓他自己幫我們上色，
安裝的方法很簡單，一樣透過最上面所說的方法新增「HTML/JavaScript」，新增下述這段語法：
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>這時候只要在原本的class後面在新增一段prettyprint，程式碼就會自動套色了， 像是這樣：
<pre class="codeblock prettyprint"> 中間可以插入你想放入的程式碼 </pre>
