7.28.2013

如何在Google Blogger展現程式碼??

有時後在自己的Blogger上，註記自己在工作遇到的問題和解決方案，常常會用到張貼各式各樣的程式碼；每次看別人的Blog的源代碼都弄得漂漂亮亮，怎麼自己的好像殘破不勘??

於是也Google一下，看看有沒有適用於Google Blogger的解決方案；沒想到還真是不少人都有在分享，所以也把這些步驟給記了下來!!

首先，在進入Blogger的後台之後，點選左邊樹狀選單的「範本」，然後在「網誌即時狀態」的右下角，有一個「編輯HTML」，點選它，如下圖：


進入到網誌範本的HTML程式碼編輯區之後，請以「</head>」做搜尋；然後把以下的程式碼，加入到</head>的前面：
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>
接著，在程式碼中，再以關鍵字「/* Posts」做搜尋；找到之後，把以下的程式碼加進去：
.post .code { 
  display: block; /* fixes a strange ie margin bug */
  font-family: Courier New; 
  font-size: 10pt; 
  overflow:auto; 
  background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  max-height:2500px;
  line-height: 1.2em;
}

其中，程式碼背景的URL部份，可以用http://klcintw.images.googlepages.com/Code_BG.gif，也可用https://sites.google.com/site/fly2sky999/Code_BG.gif。

最後，用「body」當關鍵字做搜尋，把以下的程式碼也加進去：
<body OnLoad='prettyPrint(); 'expr:class='"loading" + data:blog.mobileClass'>
然後就可以點選上方的儲存範本。爾後，只要在你所想要呈現的程式碼中，用以下的標籤包覆起來：

<pre class="code prettyprint">
// 你要呈現的程式碼!!
</pre>

就會有如同本篇文章展現程式碼部份的效果了!! 不過，有一點要注意到，若是有大於 (>)或是小於 (<)的符號，請記得先轉譯成&gt;和&lt;。

或者使用一些HTML Encode的輔助軟體 (或網頁)。
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)