วันก่อนไปเจอในบล็อกของใครแล้วก็ไม่รู้ เขาแสดงโค้ด php บนหน้าเว็บด้วยความสวยงาม หันมาดูของเรา ทำม้ายทำไม มันถึงไม่มีสีสันอย่างเขาบ้าง ด้วยความที่เห็นคนอื่นมี ตัวเองก็อยากมีบ้าง เลยใช้บริการเฮียกู ค้นหา และแล้วพรหมลิขิต บันดาล ชักพา ให้ไปเจอกับโค้ดตัวหนึ่งที่เขาเขียนไว้แจกฟรี นามกรว่า SyntaxHighlighter1.1.5
ตัวอย่าง
SELECT * FROM tbl_members WHERE member_id = 1
เว็บเขา
http://code.google.com/p/syntaxhighlighter/
หลังจากที่งมหอยโข่งอยู่ 2 วัน ก็เป็นผลสำเร็จ วันแรกก้อปคำแนะนำที่เว็บเขามาลอง มันดันไม่ได้อ่ะ ว่าจะเลิกใช้แล้ว หันไปหาตัวอื่น แต่ด้วยความที่ว่า ถ้ามันใช้ไม่ได้จริง มันก็ต้องมีคนด่าบ้างแหละ แต่ก็ไม่ปรากฏว่าใครด่า คนบ่น แสดงว่ามันต้องใช้ได้ แล้วทำไมเราใช้ไม่ได้ อ่า... เป็นคำตอบที่ต้องค้นหา สิ่งที่ผมผิดมีอยู่สองอย่าง
1 include ตัวคริปต์มาไม่ถูก ก็ดันเขาแนะนำไว้อย่างไร เล่นมันตรงๆอย่างนั้นเลย
2 วางสคริปผิดตำแหน่ง ก็ในเว็บเขาไม่เห็นบอกอะไร
เอาล่ะ ค่อยชี้ให้เห็นทีหลัง ตอนนี้กล่าวถึงการใช้งานมันก่อน
หลังจากที่ดาวน์โหลดสคริปต์และแตกซิปออกมา ท่านจะได้ โฟลเดอร์ 3 โฟลเดอร์ที่บรรจุไฟล์อยู่ข้างใน ตามโครงสร้างนี้
+--Scripts
----shBrushCpp.js
----clipboard.swf
----shBrushCSharp.js
----shBrushCss.js
----shBrushDelphi.js
----shBrushJava.js
----shBrushJScript.js
----shBrushPhp.js
----shBrushPython.js
----shBrushRuby.js
----shBrushSql.js
----shBrushVb.js
----shBrushXml.js
----shCore.js
+--Styles
----SyntaxHighlighter.css
+--Uncompressed
----shBrushCpp.js
----clipboard.swf
----shBrushCSharp.js
----shBrushCss.js
----shBrushDelphi.js
----shBrushJava.js
----shBrushJScript.js
----shBrushPhp.js
----shBrushPython.js
----shBrushRuby.js
----shBrushSql.js
----shBrushVb.js
----shBrushXml.js
----shCore.js
มาถึงตรงนี้คงเกิดคำถาม ทำไมในโฟลเดอร์ Scripts กับ Uncompressed จึงมีชื่อไฟล์เหมือนกัน ก็ในโฟลเดอร์ Scripts เขาไว้ใช้งาน Uncompressed เขาไว้ให้ศึกษา เพราะมีคอมเม้นในแต่ละ js ครบครัน
เอาละถึงเวลาใช้งานจริง
1. เอาโค้ดที่ต้องการแสดงคร่อมด้วย
<pre name="code" class="c-sharp">
... some code here ...
</pre>
ข้อแนะนำ: แท็ก pre นี้ไม่ต้องใส่ id="code" เข้าไปนะ ผมลองแล้ว มันทำให้ไม่แสดงผล ส่วนตรง class ก็ให้เปลี่ยนให้ตรงกับภาษาที่ท่านจะแสดง เช่น ถ้าท่านแสดงโค้ด php ก็ให้เปลี่ยนเป็น class="php"
2. อินคลูดสิ่งที่จำเป็นเข้ามา
<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="Scripts/shCore.js"></script>
<script language="javascript" src="Scripts/shBrushPhp.js"></script>
<script language="javascript" src="Scripts/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
ข้อแนะนำ: อินคลูดไฟล์เหล่านี้ให้วางไว้หลัง </html> ตรงนี้แหละที่ผมเคยบอกด้านบนว่าใช้งานมันไม่ได้ ผมไปใส่ไว้ในแท็ก <head>
และข้อแนะนำอีกอย่างคือ ไม่ต้องสงสัยเรื่อง dp. เป็น instant ของอ็อบเจ็ก ไม่รู้ประกาศกันตั้งแต่ตอนไหน ใส่ๆ ตามที่แนะนำไปเหอะ
ทีนี้ ดูตรงนี้
<script language="javascript" src="Scripts/shBrushPhp.js"></script>
ถ้าท่านต้องการแสดงภาษาอื่นที่ไม่ใช่ php เช่นต้องการแสดง sql ก็ให้ท่านอินคลูดไฟล์
<script language="javascript" src="Scripts/shBrushSql.js"></script>
เข้ามา แสดงภาษาไหนต้องอินคลูดไฟล์ไหน ก็ดูเอาจากหลังชื่อไฟล์ เขาต่อด้วยภาษาอยู่แล้ว หรือจะกันเหนียวด้วยการ อินคลูดมันมาซะให้หมด ก็ไม่ว่ากัลลล....
จบแล้ว..
ไม่มีความคิดเห็น:
แสดงความคิดเห็น