2014年7月24日

在網頁上顯示程式碼 - Code Prettify tool


最近開始著手將一些技術相關文章整理至部落格上,由於有些內容是範例程式碼,通常需要在網頁上呈現較易讀的樣式,因此就順手(湊個篇幅)在這邊介紹好用的工具。目前大部份的部落格服務也都有提供類似Markdown的文章編輯功能,可以將內文直接以Quoto標記,這個Quoto標記背後其實就是利用HTML的<blockquote/>標籤來標示內容。雖然這種摘引的方式可以快速區分程式碼範例和內文的差異,但對程式碼閱讀來說,辨識度仍非常的差。

enter image description here


利用<pre/> 或是 >code/> 語法


因此我們大多直接下海編輯HTML內容,改用<pre/>或是<code/>的標籤來標記程式碼,另一種方式是採用HTML5的格式,以<pre/><code class=”language-java> …</code></pre> 的這種將兩個標籤搭配使用的方式。

以上述的程式範例用blockquote標示會顯示如下:
@Override
    public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu.
    getMenuInflater().inflate(R.menu.my, menu);
    return true;
}
而用code標示,則顯示如下:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.my, menu);
return true;
}



Google當然也佛心地提供了好用的pretty-print工具


由於語法的顯示格式通常會隨著不同的語言會有所不同,如果想要更忠實地呈現不同的語法樣式,或是想要自由地定義自己想要的格式,不妨試著利用Google的Javascript code prettifier工具。code prettifier是一個Javascript + CSS的小工具,使用方法當然就是要直接編寫HTML語法,不過編輯方式算相當簡單,第一步驟是在HTML前面內嵌這個script。
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
接下來直接利用<pre class="prettyprint"/>或是<code class="prettyprint"/>來標記程式碼即可,如此一來,標示的程式碼便會根據run_prettify.js中的script及CSS樣式來顯示不同的格式。
例如:


@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.my, menu);
return true;
}

此外,code prettify tool還會自動偵測語言類型,因此我們無需特別指定,但如果是因為想要顯示較特殊的語言,也可以透過如 <code class="prettyprint lang-*" />的方式直接指定(符號*表示欲指定的程式碼附檔名,如lang-sql)。以下是官方文件所述預設支援的語言種類:

<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
    "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
    "xhtml", "xml", "xsl".
</pre>


顯示不同的主題外觀


code prettify 也設計了幾種不同的主題風格(skin),可根據不同的喜好來置換主題,例如我比較喜歡暗背景搭配亮色字型,則可以選擇如下的desert風格:

enter image description here

使用方式是在指定的script標籤中加入如下的skin屬性:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=desert"/>
另外還可以選用其他各種不同的主題清單


標示行數


有時候我們會希望透過行數來指明程式碼某一行的內容,此時可以在prettyprint後面加上linenums的設定:
<pre class="prettyprint linenums:4">...</pre>
其中linemums:4表示該程式碼行數編號從第四行開始編,顯示結果如下:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.my, menu);
return true;
}


題外話


不知道何時開始,凡是尋找資訊系統上相關問題時,常常找到Google所提供不錯的解決方案而且都是open source,從規模強大的應用程式框架到這種小而精美如code prettify的小工具都有,以台廠角度來看這件事情,常常會覺得不可思議,先不論有沒有公司會同意花資源去開發這種領域獨特且小眾無盈利的專案,Google公司的高層主管應該也不會細管這些小專案才對,這些小專案可能只是工程師隨手寫來解決自身問題,覺得好用便公開給大家使用,Google本身也很放心地放任工程師以官方名義發表這些產品,這可能是Google之前鼓勵工程師以20%工作時間自由創新的這個制度下的產物。見微知著,若要認真探討企業的成功之道的話,我想公司能夠追求卓越,主要也是企業文化所導致的結果,而非其本身擁有多高超的工程技術或是不傳之秘的研發經驗,若是靠後者所出道,我想我會偏頗地把這一時的成功,推究給運氣。

沒有留言:

張貼留言