การ 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-->
    

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

  3. ถ้าต้องการโพสภาษาอื่นๆ นอกจาก css ,javascript ,php ,sql ,xml ให้เพิ่มบรรทัด
    <script src=’http://alexgorbatchev.com/pub/sh/current/scripts/ไฟล์รูปแบบ (brush)’ type=’text/javascript’></script> ดูได้จากเว็บ 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 อาจจะสับสน
    • บางบราวเซอร์์จะสับสนถ้ามีการใส่ </script>

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

ตัวแปร หน้าที่ ตัวเลือก ค่าตั้งต้น
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

About plusmagic

PHP lover in thailand

Posted on 2010/09/05, in programming, Tips & Tricks and tagged , , , , , , , . Bookmark the permalink. ใส่ความเห็น.

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: