網路上常常會有很多人分享程式碼
相信應該也有不少人在尋找好的顯示程式碼方式
但是阿塞看到大多數都是程式碼的區塊反白
並且對程式碼的字型做變化
今天在 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 囉~~~
發表文章
