แสดง Code สวยๆ Style Google ด้วยเครื่องมือที่เรียกว่า SyntaxHighlighter

25 September 2008

มาอีกแล้วคับสำหรับวันนี้ ในวันนี้นั้นเราก็ขอนำเสนออีกเครื่องหนึ่งที่จะช่วยให้ Development แสดง Code ในเว็บไซต์ให้ดูสวยงาม ซึ่งจะสวยงามอย่างไรนั้นก็จะเป็นอย่างที่เราเห็นในภาพข้างบนนั้นแหละคับ ซึ่งผมคิดว่าน่าจะเป็นประโยชน์ไม่ใช่น้อยสำหรับโปรแกรมเมอร์หรือเว็บมาสเตอร์อีกหลายคนที่ต้องการแสดง Code ต่างๆ

 

เอาล่ะคับ มาดูกันเลยดีกว่าว่าต้องเราต้องมีอะไรบ้าง
สิ่งแรกเลยต้อง Download File Script สำหรับช่วยในการสร้าง Style ของเราไปก่อน

จากนั้นเราก็แตก file ไปไว้ที่เดียวกันกับหน้าเว็บที่เราเก็บไว้
จากนั้นมาดูส่วนที่เราจะต้องมีในหน้าเว็บกันบ้างน่ะคับ
สิ่งแรกเลยก็คือ ส่วนที่เราจะทำการเรียกใช้ Script ของเรา
view plaincopy to clipboardprint?
  2. <link type="text/css" rel="stylesheet" href="./Styles/SyntaxHighlighter.css"></link>
  3. <link href="./Styles/TestPages.css" rel="stylesheet" type="text/css">
  4. </link>

ส่วนส่วนข้างบนนี้ให้เอาไว้ระหว่าง<head>…</head>

หลังจากนั้น Script อีกอันหนึ่งที่เราจะต้องเพิ่มเข้าไปเพื่อดึง script มาใช้นั้นก็คือ
view plaincopy to clipboardprint?
  1. <script class="javascript" src="./Scripts/shCore.js"></script>
  2. <script class="javascript" src="./Scripts/shBrushCSharp.js"></script>
  3. <script class="javascript" src="./Scripts/shBrushPhp.js"></script>
  4. <script class="javascript" src="./Scripts/shBrushJScript.js"></script>
  5. <script class="javascript" src="./Scripts/shBrushJava.js"></script>
  6. <script class="javascript" src="./Scripts/shBrushVb.js"></script>
  7. <script class="javascript" src="./Scripts/shBrushSql.js"></script>
  8. <script class="javascript" src="./Scripts/shBrushXml.js"></script>
  9. <script class="javascript" src="./Scripts/shBrushDelphi.js"></script>
  10. <script class="javascript" src="./Scripts/shBrushPython.js"></script>
  11. <script class="javascript" src="./Scripts/shBrushRuby.js"></script>
  12. <script class="javascript" src="./Scripts/shBrushCss.js"></script>
  13. <script class="javascript" src="./Scripts/shBrushCpp.js"></script>
  14. <script class="javascript">
  15. dp.SyntaxHighlighter.ClipboardSwf = 'Scripts/clipboard.swf';
  16. dp.SyntaxHighlighter.HighlightAll('code');
  17. </script>
  18. </code>

ซึ่งส่วนนี้ให้เอาไว้ก่อน Tag </body>

จากนั้นมาดูในส่วนของ Code กันบ้างดีกว่าว่าเราจะใส่อย่างไร เช่น
view plaincopy to clipboardprint?
  2. <pre name="code" class="php">
  3. /***********************************
  4. ** Multiline block comments
  5. **********************************/
  6. <html>
  7. <body>
  8. ....เนื้อหาต่างๆจ้า...
  9. </body>
  10. </html>
  11. </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>








บทความในหมวดที่่น่าสนใจ อื่นๆ CSS Learning

08 Oct 08 การจัดตำแหน่ง div ให้อยู่กี่งกลาง อ่าน 5336 21 Aug 09 ตรึงหัวข้อ header ในตาราง table ด้วย css รองรับ Firefox และ IE อ่าน 4804 02 Apr 10 สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน ด้วย เทคนิค css อ่าน 4586 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 4586 08 Oct 08 การสร้างปุ่มด้วย CSS อ่าน 4578 25 Sep 08 แนวทางการเขียน CSS ในรูปแบบย่อ อ่าน 4369 31 Oct 09 ใช้งาน CSS Sprite images กับ การกำหนด CSS ของ Input form อย่างง่าย อ่าน 4331 18 Oct 08 สร้างเมนูแนวนอน ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4127 25 Sep 08 ความรู้เกี่ยวกับ CSS เบื้องต้น อ่าน 4116 25 Sep 08 เอา scrollbar ออกจาก textarea ด้วย CSS อ่าน 4055 24 Feb 09 การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง อ่าน 4004 25 Sep 08 Borders การจัดการเกี่ยวกับขอบ อ่าน 3973 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 3968 15 Oct 08 การสร้างข้อความแจ้งเตือนด้วย CSS อ่าน 3754 25 Sep 08 ข้อความ Text การจัดการเกี่ยวกับขนาดและรูปร่างของข้อความ อ่าน 3692

บทความคนเข้าอ่านวันนี้

19 Mar 11 การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook อ่าน 1791 08 Oct 08 javascript อย่างง่าย กับการสร้างปุ่มจากรูปภาพ อ่าน 2822 29 Oct 10 แนะนำ jQuery CountDown plugin สวยๆ สำหรับประยุกต์ใช้งาน อ่าน 2711 19 Aug 09 สร้าง เมนูแท็บ Tabs อย่างง่าย ด้วย jQuery UI อ่าน 10400 30 Mar 09 ค้นหาและ hilight ข้อความในหน้าเว็บเพจด้วย jQuery อ่าน 2765 25 Sep 08 แสดงตัวอักษร เหมือนกับกำลังพิมพ์ คล้าย www.manager.co.th อ่าน 3031 04 Feb 09 แก้ไขข้อความแบบทันที ด้วย jQuery อ่าน 3816 25 Sep 08 การทำปุ่ม Print แบบรูปภาพ อ่าน 3993 19 Feb 09 สร้างกล่อง alert ข้อความเฉพาะตัว ด้วย jQuery และ CSS อย่างง่าย อ่าน 4510 02 Feb 10 หมุน สลับ แบนเนอร์ในแนวนอน ด้วย jQuery อย่างง่าย อ่าน 3454 25 Oct 08 ส่งอีเมลล์พร้อมกับแนบไฟล์ด้วย php mail function ได้อย่างง่าย อ่าน 5204 02 May 10 ใช้งาน ajax ใน jQuery ดึงข้อมูลจากฐานข้อมูลมาแสดง ใน tooltip อ่าน 5918 16 Aug 09 เริ่มต้น jQuery UI กับการสร้าง ปฏิทินเลือกวันที่ datepicker อ่าน 17241 10 Oct 10 การใช้งาน stream.publish ของ facebook Old REST API ด้วย php sdk อ่าน 2416 12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 8806 19 Nov 09 สร้าง scrollbar แนวตั้ง จากรูปภาพ ด้วยเทคนิค css sprite image และ jQuery อ่าน 3661 22 Mar 11 การกำหนด แท็ก html ในตัวแปร JavaScript อย่างง่าย อ่าน 1526 27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 2513 08 Oct 08 การจัดตำแหน่ง div ให้อยู่กี่งกลาง อ่าน 5336 25 Sep 08 สิ่งจำเป็นก่อนการทำงานของโปรแกรม อ่าน 3355
จำนวนผู้เยี่ยมชม 777861
คน 2012 © Copyright ninenik.com. All rights reserved.