自動Highlight您的程式碼 -- HighLight.js

網路上常常會有很多人分享程式碼
相信應該也有不少人在尋找好的顯示程式碼方式
但是阿塞看到大多數都是程式碼的區塊反白
並且對程式碼的字型做變化

今天在 WebAppers 看到介紹了一個很酷的 javascript
原文在此
它居然還能夠全自動的幫你的程式碼做 highlight 喔
不知道什麼叫 highlight?請看一下範例


阿塞還發現
它不僅僅是全自動
甚至還幾乎可以說是支援任意語言耶
目前支援的語言有

Python, Ruby, Perl, PHP, HTML, CSS, Django, Javascript, VBScript, Delphi, Java, C++, RenderMan (RSL and RIB), SQL, SmallTalk, Axapta, 1C

支援 Ruby 我不覺得驚訝
但是支援 Django ?? Django 不就是 python 嗎??
仔細一看，它居然可以支援 Django 的 template 語法
我的天呀!!連我的 editor 都沒有支援 Django 的 template 語法
沒什麼好說了, 立刻修改了原本程式碼的顯示, 改用 HighLight.js 囉

首先是你的程式碼的片段
阿塞之前使用 wordpress 的時候, 抓的 css 都是用<pre><code></code></pre>把程式碼包起來
當然我知道也有不少人的程式碼只有用 <code></code>包起來
不過我相信會 post 程式碼的人都有相關修改 css 的功力
阿塞在此僅提供<pre><code></code></pre>包起來程式碼片段的 css

它原本的 css 並不支援捲動
所以阿塞稍微修改了一下原本的 css
再將網路上蠻多人在使用的 code css 加上它所提供的 css
就長成了下面這付德性了
請把下面的 css 貼到範本的 html 當中 (修改前請先備分原本的html)

pre code[class]:after {
  content: 'highlight: ' attr(class);
  display: block; text-align: right;
  font-size: smaller;
  color: white; background: #CCCCCC;
  padding-top: 0.5em;
}

pre code {
  display: block;
  background: #CCCCCC url(http://abinlee.link.googlepages.com/BG_CODE.gif) repeat-y scroll left top;
  overflow: auto;
  padding:10px 10px 10px 21px;
}

pre code, 
.ruby .subst {
  color: black;
}

.string,
.function .title,
.class .title, 
.tag .attribute .value,
.css .rules .value,
.preprocessor,
.ruby .symbol,
.built_in,
.sql .aggregate,
.django .template_tag,
.django .variable,
.smalltalk .class {
  color: #800;
}

.comment,
.java .annotation,
.template_comment {
  color: #888;
}

.number,
.regexp,
.javascript .literal,
.smalltalk .symbol,
.smalltalk .char {
  color: #080;
}

.javadoc,
.ruby .string,
.python .decorator,
.django .filter .argument,
.smalltalk .localvars,
.smalltalk .array,
.css .attr_selector,
.xml .pi {
  color: #88F;
}

.keyword,
.css .id,
.phpdoc,
.function .title,
.class .title,
.vbscript .built_in,
.sql .aggregate,
.rsl .built_in,
.smalltalk .class,
.xml .tag .title {
  font-weight: bold;
}

相信大多數人的 blogger 裡面應該都有一塊以上的 html/javascript 區塊了
請在裡面加入

<script src="http://softwaremaniacs.org/media/soft/highlight/highlight.js" type="text/javascript"></script>

<script type="text/javascript">
    initHighlightingOnLoad('1c', 'axapta', 'cpp', 'delphi', 'xml', 'html', 'css', 'django', 'java', 'javascript', 'perl', 'php', 'python', 'rib', 'rsl', 'ruby', 'smalltalk', 'sql', 'vbscript');
</script>

這樣你的程式碼就會自動 highlight 囉~~~