Syntax Highlighting for Blogger (Dynamic Views)

ผมค้นหามานานละ วิธีที่จะทำ Syntax Highlighting สำหรับ Dynamic Views
ก็มาเจอตัวนี้แหละครับ เป็นหนึ่งในโครงการ Google Code ชื่อว่า Prettify

โดยวิธีการติดตั้งก็ไม่ยาก ผมก็เลยเขียนไว้ที่นี่เผื่อเป็นประโยชน์
ขั้นแรกในหน้า Dashboard ของ Blogger ให้เลือกไปที่ Template (กรอบสีฟ้า)
โดยเราสามารถเลือกที่จะ Backup Template (กรอบสีแดง) เก็บไว้ก่อนนะครับ เผื่อมีอะไรผิดพลาด จากนั้นกดที่ Edit HTML  (กรอบสีส้ม) ก็จะได้หน้าต่างการแก้ไข Template แบบนี้
จากนั้นก็ให้เพิ่ม Code นี้ลงไปภายใน <head> Tag ครับ
<link 
   href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" 
    type="text/css" 
    rel="stylesheet"/>
  <script type="text/javascript" 
   src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js">
  </script>

** และเราสามารถเปลี่ยน Theme ได้ด้วยนะ ตรง CSS File ที่ import เข้ามาสามารถเปลี่ยนได้ แค่ไปหยิบ Source Path ของ Theme มาใส่แทน ไปเลือกที่นี่ได้เลย Prettify Theme Gallery

จากนั้นใน Body Tag ก็ไปเรียกให้ javascript ทำงานแบบนี้
<body onload="prettyPrint()"  ... >
แต่ถ้าใครใช้ Dynamic View (Theme แบบใหม่ของ Blogger) เนื่องจาก Post นั้นถูกโหลดแบบ Asynchronous จะให้ทำให้ onLoad() ใน Body Tag ทำงานไปก่อนที่โพสจะถูกโหลดจริงๆ ดังนั้น เวลาเขียน Blog ใหม่ต้องเพิ่มโค้ดนี้เข้าไปด้วย
<script>prettyPrint()</script>
แบบนี้
ส่วนวิธีการใช้งานก็ไม่ยาก ... แค่ใส่ Tag ด้านล่างครอบ Source Code ของเราแค่นั้นเอง ในหน้า HTML นะ :) (แต่ถ้าโค้ดมันเป็น HTML ล่ะก็มันจะ Execute แทนให้เราเปลี่ยนเครื่องหมายเป็น html symbol เช่น เครื่องหมายมากกว่าก็เป็น "&lt;")
<pre class="prettyprint"> ... </pre>


เท่านี้ก็เรียบร้อยแล้ว แค่นี้ Source Code ก็สวยงาม ... ปกติเวลาผมวาง Code จะใช้วิธีถ่ายภาพ ต่อไป ถ้าอยากเผยแพร่ Code คงใช้วิธีนี้แล้วล่ะ :)


Popular posts from this blog

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android

5 TED Talk ที่จะช่วยให้คุณทำงานดีขึ้น