使用Google Code Prettify漂亮顯示讓程式碼自動分辨顏色

Google Code Prettify 顯示程式碼最簡單方法

google推出的google code prettify,可用很簡單的方式讓程式碼自動分辨顏色,而且可自行調整自由度很高!

看一個範例

設定

下面包括文檔中的腳本標記

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

可選擇適合您的風格樣式

如何使用

把代碼段在<pre class="prettyprint">...</pre>或<code class="prettyprint">...</code>,它會自動美化打印。

<pre class="prettyprint">class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded <a href="#voila2">tags</a>.
}</pre>

我要如何標記我行號在程式碼上?

您可以使用linenums來打開行號。如果你的代碼沒有啟動,在1號線,您可以添加一個冒號和一個行號linenums:52,表示在程式碼在52行開始。

例如

<pre class="prettyprint linenums:4">
// This is line 4.
foo();
bar();
baz();
boo();
far();
faz();
</pre>

可自訂的Google Code Prettify CSS樣式

以下自訂的CSS樣本提供使用參考,只需要將CSS貼在你的網頁上,將會套上這個樣式呈現你的代碼框。

/*程式碼高亮設定Google Code Prettify style*/
/*main box*/
.pre-highborder{
 border: 1px solid #ff0000;
 padding: 3px 3px 3px 0;
}
pre.prettyprint, code.prettyprint {
 overflow:visible;
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius:4px;
 padding: 5px;
 background-color: #eee !important;

}
/*font*/
pre span, code span {
 font-size: 12px !important;
}
/*each line*/
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
 margin: 0 !important;
 padding: 2px 0 2px 4px !important;
 list-style-type:decimal !important;
 border-left: 1px solid #999;
}
/*even line*/
li.L1, li.L3, li.L5, li.L7, li.L9 {
 background-color: #f6f6f6 !important;
}
/*odd line*/
li.L0, li.L2, li.L4, li.L6, li.L8 {
 background-color: #FFF !important;
}
/*line-number background color*/
ol.linenums {
 background-color: #eee;
 margin-left: 5px;
 word-wrap: break-word;
}
ol.linenums li code{
	white-space:normal;
}
/*Google Code Prettify style end*/

若覺得預設的風格不喜歡,更多不同風格樣式選擇可參考這裡:Google Code Prettify.JS

相關連結:Javascript code prettifier

Posted in 電腦技巧

Find the last offers by SkyBet at www.bettingy.com BettingY.com Bonuses