แสดง Code สวยๆ Style Google ด้วยเครื่องมือที่เรียกว่า SyntaxHighlighter
25 September 2008
มาอีกแล้วคับสำหรับวันนี้ ในวันนี้นั้นเราก็ขอนำเสนออีกเครื่องหนึ่งที่จะช่วยให้ Development แสดง Code ในเว็บไซต์ให้ดูสวยงาม ซึ่งจะสวยงามอย่างไรนั้นก็จะเป็นอย่างที่เราเห็นในภาพข้างบนนั้นแหละคับ ซึ่งผมคิดว่าน่าจะเป็นประโยชน์ไม่ใช่น้อยสำหรับโปรแกรมเมอร์หรือเว็บมาสเตอร์อีกหลายคนที่ต้องการแสดง Code ต่างๆ
เอาล่ะคับ มาดูกันเลยดีกว่าว่าต้องเราต้องมีอะไรบ้าง
สิ่งแรกเลยต้อง Download File Script สำหรับช่วยในการสร้าง Style ของเราไปก่อน![]()
จากนั้นมาดูส่วนที่เราจะต้องมีในหน้าเว็บกันบ้างน่ะคับ
สิ่งแรกเลยก็คือ ส่วนที่เราจะทำการเรียกใช้ Script ของเรา
- <link type="text/css" rel="stylesheet" href="./Styles/SyntaxHighlighter.css"></link>
- <link href="./Styles/TestPages.css" rel="stylesheet" type="text/css">
- </link>
ส่วนส่วนข้างบนนี้ให้เอาไว้ระหว่าง<head> </head>
หลังจากนั้น Script อีกอันหนึ่งที่เราจะต้องเพิ่มเข้าไปเพื่อดึง script มาใช้นั้นก็คือ- <script class="javascript" src="./Scripts/shCore.js"></script>
- <script class="javascript" src="./Scripts/shBrushCSharp.js"></script>
- <script class="javascript" src="./Scripts/shBrushPhp.js"></script>
- <script class="javascript" src="./Scripts/shBrushJScript.js"></script>
- <script class="javascript" src="./Scripts/shBrushJava.js"></script>
- <script class="javascript" src="./Scripts/shBrushVb.js"></script>
- <script class="javascript" src="./Scripts/shBrushSql.js"></script>
- <script class="javascript" src="./Scripts/shBrushXml.js"></script>
- <script class="javascript" src="./Scripts/shBrushDelphi.js"></script>
- <script class="javascript" src="./Scripts/shBrushPython.js"></script>
- <script class="javascript" src="./Scripts/shBrushRuby.js"></script>
- <script class="javascript" src="./Scripts/shBrushCss.js"></script>
- <script class="javascript" src="./Scripts/shBrushCpp.js"></script>
- <script class="javascript">
- dp.SyntaxHighlighter.ClipboardSwf = 'Scripts/clipboard.swf';
- dp.SyntaxHighlighter.HighlightAll('code');
- </script>
- </code>
ซึ่งส่วนนี้ให้เอาไว้ก่อน Tag </body>
จากนั้นมาดูในส่วนของ Code กันบ้างดีกว่าว่าเราจะใส่อย่างไร เช่น- <pre name="code" class="php">
- /***********************************
- ** Multiline block comments
- **********************************/
- <html>
- <body>
- ....เนื้อหาต่างๆจ้า...
- </body>
- </html>
- </pre>
จะสังเกตุได้น่ะคับว่าเราจะใส่ code เอาไว้ใน tag <pre>
</pre>
ซึ่ง tag <pre> นั้นเอาไว้กำหนดภาษาของ Code ว่าเป็นภาษา เช่น
<pre name=code class=php>
Code PHP
<pre>
<pre name=code class=ruby>
Code RUBY
<pre>
<pre name=code class=vb>
Code SQL
<pre>
<pre name=code class=vb>
Code VB
<pre>
<pre name=code class=c-sharp>
Code C#
<pre>
<pre name=code class=xml>
Code XML
<pre>
<pre name=code class=html>
Code HTML
<pre>
และอีกอย่างคือเครื่องหมาย < ให้เราใส่เป็น <
นอกจากนี้ยังกำหนดลักษณะของการแสดง Code ในลักษณะต่างๆได้ เช่น ไม่ให้แสดงหมายเลขด้านหน้า Code ก็ใส่เป็น
<pre name="code" class="html:nogutter>
Code HTML
<pre>
บทความคนเข้าอ่านวันนี้
13 Oct 08 คำสั่ง SQL AND OR อ่าน 3448 17 Feb 12 ประยุกต์ ใช้งาน jquery ui autocomplete ร่วมกับฐานข้อมูล อย่างง่าย อ่าน 3274 25 Sep 08 เลือกหรือไม่เลือก checkbox ทั้งหมด อ่าน 4331 28 Oct 10 เริ่มต้นใช้งาน jquery ui autocomplete อย่างง่าย อ่าน 5498 24 Mar 09 Database ข้อมูลจังหวัดและอำเภอในประเทศไทย อ่าน 7507 17 Nov 08 ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery อ่าน 10494 04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 4238 25 Sep 08 แสดง Code สวยๆ Style Google ด้วยเครื่องมือที่เรียกว่า SyntaxHighlighter อ่าน 6157 01 Dec 10 การใช้งาน polyline และ polygon ใน google map api v3 อ่าน 4790 25 Sep 08 แสดงตัวอักษร เหมือนกับกำลังพิมพ์ คล้าย www.manager.co.th อ่าน 3485 25 Sep 08 การจัดรูปแบบทศนิยมของตัวเลขใน javascript อ่าน 6198 25 Sep 08 Code เกี่ยวกับ การหาวันข้างหน้า อ่าน 2144 16 Dec 11 ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู อ่าน 3479 10 Nov 08 ฟังก์ชัน PHP ตัดข้อความยาวด้วย wordwrap อ่าน 4329 04 Jun 09 สร้างเมนูย่อย ให้กับข้อความ เมื่อนำเม๊าท์ไปชี้ mouseover ด้วย css และ jquery อย่างง่าย อ่าน 7825 08 Feb 12 Google map API v.3 กับ jQuery ลากจุดหา ชื่อตำแหน่ง และ พิกัด ค่า latitude longitude อ่าน 2026 05 Oct 10 สร้าง login logout และกำหนด permission ของ facebook ด้วย php sdk อ่าน 7705 21 Jan 11 การใช้งาน Meta characters ใน Regular Expressions ของ PHP อ่าน 1540 09 Apr 10 สร้าง countdown นับเวลา ถอยหลัง ด้วย javascript อ่าน 5973 07 Jul 10 เทคนิค php ดึงข้อมูล comment จาก facebook มาใช้งาน อ่าน 6408
