另一個在網頁顯示程式碼的方式,透過 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!");
}
}
閱讀全文...