[blogger]利用 Google Code Prettify 顯示程式碼

另一個在網頁顯示程式碼的方式，透過 Google Code Prettify ，程式碼顯示變成簡單又美觀。

主要參考官網的 Getting Started 這篇文章，只要載入必要的 CSS 和 javascript ，就會自動尋找 <pre>, <code>, <xmp> ，處理美化程式碼。

Blogger 透過[版面配置]/[新增小工具]/[Html/JavaScript]，加入底下程式碼。

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

還可以指定參數加入 skin 或 lang (skin=sunburst&lang=js)，支援的外觀可以在 Gallery of themes for code prettify 找到。

NOTE：在 script 標籤中指定語言會套用到所有的網頁，因此 Google Code Prettify 也支援利用 class 屬性 lang-* 的方式，來指明程式語言。

<pre class="prettyprint lang-java">
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}
<pre>

或採用 html5 ，在 code 標籤以 language-* 的 class 屬性，指明程式語言。

<pre class="prettyprint"><code class="language-java">
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}
</code><pre>

如要顯示行號，要在 class 加上 linenums:no ，no表示要從第幾行開始，可不指定。

<pre class="prettyprint linenums:168">

和 CSS BLOCK 搭配

public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}

閱讀全文...

[Blogger]在網頁用 CSS BLOCK 來顯示程式碼

以前在 blogger 利用其修改範本的功能，針對顯示程式碼的部分，做了一些改進，後來都是顯示的蠻好的，不知道何時開始，改變的設定似乎無效了，造成顯示都會跑掉，只好搜尋有無新的改進方式，來改善這問題。

底下是新找到的方式，紀錄一下，免得忘記了。
1. 利用「新增小工具」的功能，選擇 HTML/JavaScript ，然後插入底下程式碼，就可以避免直接修改 HTML 範本

<style>
.post .mycode {
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:800px;
line-height: 1.2em;
}
</style>

其中的 mycode 就是class name，用來搭配pre或div使用。
如下面這段程式

<pre class='mycode'>
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}
</pre>

顯示的效果為:

public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}

NOTE:程式碼中有 < 或 > 會影響到網頁顯示，可透過 HTMLEncode 這網站來進行轉換。
閱讀全文...

[Html]How to display alt text for an image in chrome

今天在寫文件和html簡單頁面時，發現在chrome的圖片有用alt來顯示訊息，卻顯示不出來，拜讀估狗大神，發現似乎是 webkit bug ，底下是我試出的解決方式，須新增3個attribute: height, width, title，這樣就可以正確顯示訊息。

原本:
<img src="xxx.png" alt="test" />

修改後:
<img height="90" width="90" src="xxx.png" alt="test" title="test" />
閱讀全文...