標題:
線上程式碼語法高亮產生器 - Online syntax highlighting
[打印本頁]
作者:
wmh
時間:
2008-10-3 08:59
標題:
線上程式碼語法高亮產生器 - Online syntax highlighting
你可以在這邊輸入你的程式碼，選擇語法種類再按下「幫我上色」的按鈕就可以得到有色彩顯示的程式碼囉。
[jsg.example]
<link type="text/css" rel="stylesheet" href="include/jsg/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
<textarea id="codes" rows="10" cols="80">
<script type="text/javascript">
function doSomething(e) {
var keynum;
var keychar;
var numcheck;
if (window.event) {
keynum = e.keyCode;
} else if (e.which) {
keynum = e.which;
}
keychar = String.fromCharCode(keynum);
alert(keychar);
}
</script>
</textarea><br />
<select id="brush">
<option value="jscript">JavaScript</option>
<option value="cpp">C++</option>
<option value="csharp">C#</option>
<option value="css">CSS</option>
<option value="delphi">Delphi</option>
<option value="xml">HTML、XML</option>
<option value="java">Java</option>
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="ruby">Ruby</option>
<option value="sql">SQL</option>
<option value="vb">Visual Basic</option>
</select>
<input type="button" id="doHighlight" value=" 幫我上色 " />
<pre id="showcase" name="showcase" class="jscript:nocontrols"></pre>
<script type="text/javascript" src="include/jsg/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script type="text/javascript" src="include/jsg/dp.SyntaxHighlighter/Scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="include/jsg/dp.SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="include/jsg/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="include/jsg/dp.SyntaxHighlighter/Scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="include/jsg/dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script type="text/javascript" src="include/jsg/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="include/jsg/dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="include/jsg/dp.SyntaxHighlighter/Scripts/shBrushPython.js"></script>
<script type="text/javascript" src="include/jsg/dp.SyntaxHighlighter/Scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="include/jsg/dp.SyntaxHighlighter/Scripts/shBrushSql.js"></script>
<script type="text/javascript" src="include/jsg/dp.SyntaxHighlighter/Scripts/shBrushVb.js"></script>
<script type="text/javascript" src="include/jsg/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'include/javascript/dp.SyntaxHighlighter/Scripts/clipboard.swf';
//dp.SyntaxHighlighter.HighlightAll('showcase');
$j = jQuery.noConflict();
$j(function() {
$j('#doHighlight').click(function() {
$j('.dp-highlighter').remove();
var codes = $j('#codes').val().replace(/>/g, '>').replace(/</g, '<');
if ($j.browser.msie) {
$j('#showcase').show();
$j('#showcase').get(0).outerHTML = '<pre id="showcase" name="showcase" class="' + $j('#brush').val() + ':nocontrols">' + codes + '</pre>';
} else {
$j('#showcase').html(codes).get(0).className = $j('#brush').val() + ':nocontrols';
}
dp.SyntaxHighlighter.HighlightAll('showcase');
}).trigger('click');
});
</script>
[/jsg.example]
有了程式碼高亮產生器之後，你的人生就不再是黑白了！上色後的程式碼可以複製到 Word、PowerPoint 裡面，或是任何 Google 線上的WYSIWYG 編輯器內，像是 Google Docs 或 Google Sites，從此文件內的程式碼都是漂漂亮亮的喔！
作者:
wmh
時間:
2008-10-4 00:22
標題:
其他選擇
上面這一篇是透過
dp.SyntaxHighlighter
在 client 端完成語法上色的。事實上要做程式碼的語法上色有很多其他方式，如果你偏好用黑色背景來顯示的程式碼，可以試試看這一套線上工具
Online syntax highlighting
，除了支持各式各樣的程式語言外，還有很多種佈景主題喔，在線上就可以幫你把程式碼轉成 HTML 的格式，試試看黑色的效果如何：
[jsg.example]
<pre style='color:#d1d1d1;background:#000000;'><span style='color:#d2cd86; '><</span>script type<span style='color:#d2cd86; '>=</span><span style='color:#02d045; '>"</span><span style='color:#00c4c4; '>text/javascript</span><span style='color:#02d045; '>"</span><span style='color:#d2cd86; '>></span>
function doSomething<span style='color:#d2cd86; '>(</span>e<span style='color:#d2cd86; '>)</span> <span style='color:#b060b0; '>{</span>
var keynum<span style='color:#b060b0; '>;</span>
var keychar<span style='color:#b060b0; '>;</span>
var numcheck<span style='color:#b060b0; '>;</span>
<span style='color:#e66170; font-weight:bold; '>if</span> <span style='color:#d2cd86; '>(</span>window<span style='color:#d2cd86; '>.</span>event<span style='color:#d2cd86; '>)</span> <span style='color:#b060b0; '>{</span>
keynum <span style='color:#d2cd86; '>=</span> e<span style='color:#d2cd86; '>.</span>keyCode<span style='color:#b060b0; '>;</span>
<span style='color:#b060b0; '>}</span> <span style='color:#e66170; font-weight:bold; '>else</span> <span style='color:#e66170; font-weight:bold; '>if</span> <span style='color:#d2cd86; '>(</span>e<span style='color:#d2cd86; '>.</span>which<span style='color:#d2cd86; '>)</span> <span style='color:#b060b0; '>{</span>
keynum <span style='color:#d2cd86; '>=</span> e<span style='color:#d2cd86; '>.</span>which<span style='color:#b060b0; '>;</span>
<span style='color:#b060b0; '>}</span>
keychar <span style='color:#d2cd86; '>=</span> <span style='color:#e66170; font-weight:bold; '>String</span><span style='color:#d2cd86; '>.</span>fromCharCode<span style='color:#d2cd86; '>(</span>keynum<span style='color:#d2cd86; '>)</span><span style='color:#b060b0; '>;</span>
alert<span style='color:#d2cd86; '>(</span>keychar<span style='color:#d2cd86; '>)</span><span style='color:#b060b0; '>;</span>
<span style='color:#b060b0; '>}</span>
<span style='color:#d2cd86; '><</span><span style='color:#d2cd86; '>/</span>script<span style='color:#d2cd86; '>></span>
</pre>
[/jsg.example]
此外，如果你熟悉 Vim，可以安裝 2html.vim 這個 plugin，就可以把程式碼給轉成 HTML 格式，詳情請參考這篇部落格文章：
Syntax highlighting on this blog using semantic tags and Vim
如果上述的工具都不合用，也有專門產生高亮語法的工具軟體，可以批次或處理大量的程式碼，只要透過 Google 搜尋一下 Syntax Highlight 相關字詞應該不難找到，希望大家都有個美麗的程式人生～
歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://www.jsgears.com/)
