用想法寫日誌- SealsStudio

身為程式設計師，相信常有一些程式碼或操縱方式記下來的想法，除了選擇一個好的部落格外，接著就是完整程式碼的呈現方式。(常常在複製貼上後，所有的程式碼的亂七八糟>"<)

近日在網上搜尋一些相關資料，發現了一些應用介紹給大家 -「Google Code Prettify」。

我們想要呈現如下的兩種樣式如下：

樣式1

public class Welcome{
    public static void main (String[] args) {
        System.out.println("Welcome!");
    }
}

樣式2

public class Welcome{
    public static void main (String[] args) {
        System.out.println("Welcome!");
    }
}

不需要下載任何檔案，直接開始設定以下步驟：

(1) 到Blogger的後台，範本 > 編輯HTML。

(2) 加入以下程式碼(樣式1使用)，本人是加在<head> </head>之間：

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

(3) 接著找到/* Posts，在下面加入以下程式碼(樣式2使用)：

.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:250px; 
line-height: 1.2em;
}

完成設定!!!

樣式1使用方式：

輸入

<pre class="prettyprint">
public class Welcome{
    public static void main (String[] args) {
        System.out.println("Welcome!");
    }
}
</pre>

結果

public class Welcome{
    public static void main (String[] args) {
        System.out.println("Welcome!");
    }
}

樣式2使用方式：

輸入

<pre class="codeblock"><code>
public class Welcome{
    public static void main (String[] args) {
        System.out.println("Welcome!");
    }
}
</code></pre>

結果

public class Welcome{
    public static void main (String[] args) {
        System.out.println("Welcome!");
    }
}

若想呈現比較複雜的程式碼，請先到HTMLEncode，將需要呈現的程式碼轉換後

再編輯。

用想法寫日誌- SealsStudio

2014年10月22日星期三

3dsMax 2011 32bit - "Error parsing Xaml file : Root element is missing."

2014年7月25日星期五

解決首頁被mysearchdial綁架 - Chrome

2014年7月24日星期四

在Blogger內顯示簡潔的程式碼 - Google Code Prettify

truthmiles

2014年10月22日 星期三