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

25 September 2008

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

 

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

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

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

หลังจากนั้น Script อีกอันหนึ่งที่เราจะต้องเพิ่มเข้าไปเพื่อดึง script มาใช้นั้นก็คือ
  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 กันบ้างดีกว่าว่าเราจะใส่อย่างไร เช่น
  1. <pre name="code" class="php">
  2. /***********************************
  3. ** Multiline block comments
  4. **********************************/
  5. <html>
  6. <body>
  7. ....เนื้อหาต่างๆจ้า...
  8. </body>
  9. </html>
  10. </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

02 Apr 10 สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน ด้วย เทคนิค css อ่าน 5361 21 Aug 09 ตรึงหัวข้อ header ในตาราง table ด้วย css รองรับ Firefox และ IE อ่าน 5353 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 5349 08 Oct 08 การสร้างปุ่มด้วย CSS อ่าน 5197 31 Oct 09 ใช้งาน CSS Sprite images กับ การกำหนด CSS ของ Input form อย่างง่าย อ่าน 4961 18 Oct 08 สร้างเมนูแนวนอน ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4929 25 Sep 08 แนวทางการเขียน CSS ในรูปแบบย่อ อ่าน 4923 25 Sep 08 เอา scrollbar ออกจาก textarea ด้วย CSS อ่าน 4714 24 Feb 09 การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง อ่าน 4702 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4633 25 Sep 08 ความรู้เกี่ยวกับ CSS เบื้องต้น อ่าน 4580 03 Apr 11 จัดข้อความยาว ให้อยู่ในกรอบ ด้วย css break word อ่าน 4555 25 Sep 08 Borders การจัดการเกี่ยวกับขอบ อ่าน 4369 15 Oct 08 การสร้างข้อความแจ้งเตือนด้วย CSS อ่าน 4284 25 Sep 08 ข้อความ Text การจัดการเกี่ยวกับขนาดและรูปร่างของข้อความ อ่าน 4106

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

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
จำนวนผู้เยี่ยมชม 892665
คน 2012 © Copyright ninenik.com. All rights reserved.