แสดงซอร์สโค๊ดบนเวบบล็อกแบบมืออาชีพด้วย SyntaxHighLighter

เกริ่นนำ สวัสดีกันอีกครั้งสำหรับเวบบล็อก credit-thai.com แนะนำบล็อกดีๆ เรื่องราวง่ายๆ ที่ทำเองได้ด้วยตนเอง (Do It Yourself) หลังจากที่ผู้เขียนถูกปฎิเสธครั้งที่ 2 ในการเปิดใช้งาน GOOGLE ADSENSES

การที่กูเกิลไม่ยอมนั้นมีหลายสาเหตุด้วยกันเริ่มต้นกันที่เนื้อหาไม่เพียงพอ ไม่มีเมนูเพื่อให้ง่ายต่อการค้นหาข้อมูล รวมถึงไม่มีวิธีการจัดการเนื้อหาให้อ่านง่ายและเป็นระเบียบสวยงาม ปัญหาที่สำคัญของหลายๆ เวบไซต์ที่พบมากก็คือ รูปแบบการเขียนภาษาคอมพิวเตอร์(Syntax) ดูแล้วไม่น่าอ่าน ซึ่งเป็นจุดเริ่มต้นที่ผู้เขียนจะได้ขอแนะนำวิธีการแสดงซอร์สโค๊ดบนเวบบล็อกแบบมืออาชีพด้วย SyntaxHighLighter กัน

การติดตั้ง SyntaxHighLighter ให้สามารถใช้งานบนเวบไซต์เราได้ต้องดำเนินการตามขั้นตอนต่อไปนี้

การติดตั้งซอฟต์แวร์ ให้ทำการเพิ่มไฟล์หลักเหล่านี้ลงในหน้าเวบไซต์ที่ต้องการแสดงผล shCore.js และ shCore.css ด้วยการไปดาวน์โหลดได้ที่ http://alexgorbatchev.com/SyntaxHighlighter/download/
เพิ่ม brushes ตามต้องการ เช่น shBrushJScript.js สำหรับ จาวาสคริป
ประกอบด้วย shCore.css และ shThemeDefault.css
เขียนซอร์สโค๊ดที่ต้องการแสดงผล(snippet)ด้วย <pre /> หรือ <script />
เรียกใช้เมทธอดรูทีน SyntaxHighlighter.all() ของจาวาสคริป

ตัวอย่างวิธีการเขียนซอร์สโค๊ดเพื่อแสดงผล SyntaxHighLighter

/**
  * SyntaxHighlighter
  */
function foo()
{
   if (counter <= 10)
       return;
   // it works!
}

ตัวอย่างนี้เป็นสคริปที่ผู้เขียนใช้เป็นเทมเพลตจริงสำหรับการเขียน SyntaxHighLighter แค่ Copy&Plate แล้วนำไปแก้เฉพาะในส่วนของ code here เพื่อให้ง่ายและสะดวกต่อการหยิบไปใช้งาน เพียงง่ายๆ แค่นี้ความเป็นมืออาชีพในการสร้างเวบบล็อกของเราก็มีเพิ่มขึ้น

 











 









code here

จากตัวอย่างผู้เขียนทดลองติดตั้ง SyntaxHighLighter ไว้ที่เวบไซต์ จีพีเอสติดตามรถยนต์ เพื่อให้เวบบล็อกเรียกใช้งานสคริปแต่อย่างไรก็ตามเราสามารถเรียกใช้งานสคริปต่างๆ ที่ให้บริการโดยโฮสต์เจ้าของโค๊ด ตามที่อยู่ที่ผู้เขียนให้ไว้ด้านล่างนี้

Credit-Thai.com ทำเองได้ Do It Yourself บล็อกดีๆ เรื่องราวง่ายๆ ที่ต้องทำด้วยตนเอง