การติดตั้ง Syntax Highlighter ใน blogger

     Syntax Highlighter  เป็นเครื่องมือที่ถูกพัฒนามาจาก JavaScript ที่ถูกสร้างมาเพื่อใช้แสดงผลโค้ดของบรรดาเหล่า Programmer ทั้งหลายให้มีความสวยงาม และให้คนที่มาอ่านสามารถอ่านได้ง่ายมากยิ่งขึ้น ดังรูป

     สำหรับการนำ Syntax Highlighter มาใช้ร่วมกับ Blogger ของ Google นั้นสามารถทำได้อย่างง่ายดาย ดังต่อไปนี้





     1. ไปที่หน้าจัดการ blogger แล้วเลือกการตั้งค่าดังรูปที่ 1

รูปที่ 1

   2. ถัดมาแก้ไข Template ของบล๊อกของเรา โดยเลือกแม่แบบ แล้วกดปุ่ม "แก้ไข HTML" ดังรูปที่ 2

รูปที่ 2

     3. นำโค้ด Java script ของ Syntax Highlighter  ด้านล่างไปไว้ก่อนแท็ก </head>  ดังรูปที่ 3 เพื่อให้ blogger ของเรารู้จักแท็กต่างๆของ Syntax Highlighter  

รูปที่ 3

     4.  ถัดมาเราลองสร้างบทความขึ้นมา ในส่วนของโหมด editor ให้เลือกโหมด HTML เพื่อที่จะทดสอบการใส่ syntax ของ Syntax Highlight ซึ่งโค้ดที่เราต้องการแสดงต้องอยู่ภายใต้แท็ก <pre class='brush:js;'></pre>  โดยชื่อคลาสที่อยู่ในแท็ก <pre> สามารถเปลี่ยนได้ตามโค้ดของภาษาที่ต้องการแสดงผล เช่น ถ้าต้องการแสดงผลของโค้ด JavaScript ต้องใส่คลาส brush:js; หรือต้องการแสดงผลของคลาส Java ต้องใส่คลาส brush:java; ดังแสดงในรูปที่ 4 และผลลัพธ์แสดงในรูปที่ 5

รูปที่ 4

รูปที่ 5

     สิ่งที่ต้องระวัง !!! หากเราต้องการแสดงผล JavaScript ถ้าเรามีการใส่ <script type="text/javascript"> </script> ในแท็ก <pre ...> </pre> ดังรูปที่ 6







รูปที่ 6

รูปที่ 7

     เมื่อเรามาดูผลลัพธ์ในรูปที่ 7 จะเห็นว่ามีผลลัพธ์ของ JavaScript มาแสดงผลรวม ถ้าเราไม่ต้องการให้เว็บเพจของเราแสดงผลลัพธ์เหมือนในรูปที่ 7 เราต้องทำการ Encode แท็ก JavaScript ของเราเสียก่อนโดยไปที่ เว็บเพจ HTML Entities Encoder / Decoder  หรือ web2generators หรือ webatic แล้วเรานำ JavaScript ที่เราต้องการ Encode ของเราไปใส่ ดังรูปที่ 8 แล้วถัดมาให้กดปุ่ม "Encode" หลังจากนั้นให้เรา copy ผลลัพธ์ของของการ Encode ที่แสดงในรูปที่ 9 ไปใส่ในแท็ก <pre class="brush:js;"> </pre>  ดังแสดงในรูปที่ 10 

รูปที่ 8

รูปที่ 9

รูปที่ 10

รูปที่ 11

     โดยผลลัพธ์ของการ encode code ของ JavaScript ที่แสดงในรูปที่ 11 จะไม่มีผลลัพธ์ของ JavaScript ติดมาด้วย :)