HOW TO: วิธีการใช้งาน SyntaxHighlighter
Free syntax highlighter written in Java Script
ท่านเคยประสบปัญหาการแสดงโค๊ดภาษาต่างๆบนเวป เช่นภาษา C# ใช่หรือไม่.......... SyntaxHighlighter ช่วยท่านได้
SyntaxHighlighter ใช้สำหรับแสดงผลโค๊ดภาษาต่างๆบนเวปให้ดูสวยงาม. โดยจะเป็น Java Script based 100% ทำให้ไม่ต้องยึดติดกับ Server
วิธีการใช้งาน
1) Download หรือเข้าผ่านทางเวปไซด์ได้ที่นี่
2) แตกไฟล์ออกมาแล้ว Copy เข้าไปไว้ในเวปของเรา
3) กำหนดค่าที่ <head>....</head> โดยให้เลือกไฟล์ shBrush*.js สำหรับภาษาที่ต้องการได้มากกว่า 1 ไฟล์ แ่ต่จะต้องมีไฟล์ shCore.js ด้วยนะครับ
<link rel="stylesheet" type="text/css" href="Styles/SyntaxHighlighter.css" />
<script type="text/javascript" src="Scripts/shCore.js"></script>
<script type="text/javascript" src="Scripts/shBrushCSharp.js"></script>
4) กำหนดค่าวางไว้ก่้อนบรรทัด </body>
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
5) การวางโค๊ดมี 2 วิธีดังนี้ (class สำหรับการกำหนดภาษาอื่นๆ)
<pre name="code" class="c-sharp">
... some code here ...
</pre>
หรือ
<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>
หรือตั้งค่าเพิ่มเติมได้ เช่น (ดูการตั้งค่าเพิ่มเติม)
<pre name="code" class="html:collapse">
... some code here ...
</pre>
6) ผลที่ได้ก็จะมีรูปร่างหน้าตาแบบนี้
ขอขอบคุณ alex.gorbatchev (Project owners)
Imagination is more Important than Knowledge... /A.Einstein