BLOG » Coding

พื้นที่สำหรับเขียนกันลืม บ่น แชร์ ฯลฯ เรื่อยเปื่อย บ้างบางเรื่องก็อาจจะแลดูมีสาระ บ้างบางเรื่องก็อาจจะแลดูไร้สาระไปเลย

แสดง code บนเว็บด้วย SyntaxHighlighter

published by admin on 12 Jun 2011 - 14:15

เนื่องจากบทความที่เขียนส่วนใหญ่ในบล็อกนี้จะเกี่ยวกับโค้ด ก็เลยอยากลองหาวิธีแสดงโค้ดบนหน้าเว็บแบบมีสีสันเหมือนใน text editor สักหน่อย สุดท้ายได้เจอกับ syntaxhighlighter ซึ่งเป็น Script ฟรีที่พัฒนาขึ้นเพื่อให้ developer สามารถโพสแสดงโค้ดภาษาต่างๆ ให้ดูสวยงาม โดยเป็น Java Script based 100% ทำให้ไม่ต้องสนใจยึดติดกับเซิร์ฟเวอร์

ก่อนอื่นก็ไปดาวน์โหลดได้จากเว็บนี้ http://code.google.com/p/syntaxhighlighter/ ซึ่งปัจจุบันเป็นเวอร์ชัน 1.5.1 หลังจากดาวน์โหลดจะได้ไฟล์ SyntaxHighlighter_1.5.1.rar มา ก็จัดการแตกไฟล์ซะ จะพบกับโฟลเดอร์ Scripts, Styles และ Uncompressed ที่จะนำไปใช้ก็คือ Scripts กับ Styles ส่วน Uncompressed มีไว้ให้ศึกษาเนื่องจากมีการเว้นวรรคตอนและคำอธิบายโค้ดในไฟล์ js ทั้งหมด

จัดการอัพโหลด Scripts และ Styles ขึ้นเซิร์ฟเวอร์เว็บเราโดยพลัน จากนั้นก็ให้เพิ่มโค้ดนี้ลงไปในหน้าเว็บ ส่วนมากเห็นอธิบายว่าใส่ไว้ใน <head>...</head> กัน แต่ผมลองแล้วมันไม่ทำงาน สงสัยจะคนละเวอร์ชันกันมั้ง (เสียเวลามั่วไปตั้งนาน) สุดท้ายแล้วต้องเอาไปไว้หลัง </html> จึงใช้ได้ ดังนี้

สำหรับวิธีการใช้งานใน body

 ... some code here ...

จากตัวอย่างก็คือการแสดงภาษา php หากต้องการแสดงภาษาอื่นก็ให้กำหนด class เป็นภาษานั้นๆดังตาราง Brush aliases ด้านล่าง และจำเป็นต้อง include ไฟล์ js ดังตารางด้วย

Brush name Brush aliases File name
C++ cpp, c, c++ shBrushCpp.js
C# c#, c-sharp, csharp shBrushCSharp.js
CSS css shBrushCss.js
Delphi delphi, pascal shBrushDelphi.js
Java java shBrushJava.js
Java Script js, jscript, javascript shBrushJScript.js
PHP php shBrushPhp.js
Python py, python shBrushPython.js
Ruby rb, ruby, rails, ror shBrushRuby.js
Sql sql shBrushSql.js
VB vb, vb.net shBrushVb.js
XML/HTML xml, html, xhtml, xslt shBrushXml.js

 

#Tags: SyntaxHighlighter Scripts Coding