การ post source code บน blogspot (blogger)

bloger ไม่มีระบบช่วยในการโพสซอร์ทโค้ทเหมือนเวิร์ดเพลส์ แต่ก็แก้ได้ไม่ยากครับ
ขั้นตอนติดตั้งเพิ่มเติม

1. ล็อกอินแล้วเข้าไปที่ > การออกแบบ > แก้ไข HTML
2. ใส่

   <!--SYNTAX HIGHLIGHTER BEGINS-->
   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
   <script language='javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.config.clipboardSwf ='http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
   SyntaxHighlighter.all();
   </script><!--SYNTAX HIGHLIGHTER ENDS-->

   ลงไปก่อน เท็ก
   บันทึกข้อมูล

3. ถ้าต้องการโพสภาษาอื่นๆ นอกจาก css ,javascript ,php ,sql ,xml ให้เพิ่มบรรทัด
   ดูได้จากเว็บ http://alexgorbatchev.com

จากนั้นเราก็สามารถไปเขียนบทความตามปกติเมื่อต้องการใส่โค้ท มีให้เลือก 2 วิธี

1. <pre class="brush:ภาษาที่ใช้">
   ซอร์ทโค้ท</pre>

   วิธีนี้ข้อดีคือเป็นมาตราฐานไม่มีปัญหากับ RSS readers แต่โค้ทภายในจะต้องใช้ html escaped โดยสามารถใช้ Quick Escape ช่วยแปลงให้

2. <script type="syntaxhighlighter" class="brush:ภาษาที่ใช้"><![CDATA[
   ซอร์ทโค้ท
   ]]></script>

   วิธีนี้ข้อดีคือไม่ต้องแปลง code ภายใน แต่อาจมีปัญหา

   • RSS readers อาจจะสับสน
   • บางบราวเซอร์์จะสับสนถ้ามีการใส่

การปรับแต่งสามารถทำได้เหมือนกับบนเวิร์ดเพลส์

ตัวแปร	หน้าที่	ตัวเลือก	ค่าตั้งต้น
autolinks	ทำให้ Uri ภายในสามารถ คลิกได้	true/false	true
class-name	กำหนด class เอง	ชื่อ css class	”
collapse	จะยุบส่วนแสดง code เอาไว้ก่อน ต้องกดดูจึงจะเห็น	true/false	False.
firstline	ตัวเลขบรรทัด	ตัวเลข	1
gutter	แสดงตัวเลขบรรทัด	true/false	True
highlight	Highlight บรรทัดที่ต้องการ	ตัวเลขบรรทัดคั่นด้วย ,
htmlscript	Highlight ส่วนที่เป็น html มีประโยชน์เวลาเขียน html ปนกับภาษาอื่นๆ	true/false	False
smart-tabs	เปิดใช้ smart-tabs	true/false	True
tab-size	ระยะห่างของ tab	ตัวเลข	4
toolbar	แสดง toolbar	true/false	True

ตัวอย่าง

<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>

เรื่องที่เกี่ยวข้อง การ post source code บน WordPress