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

Byphunsanit

การ 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/falsetrue
class-nameกำหนด class เองชื่อ css class
collapseจะยุบส่วนแสดง code เอาไว้ก่อน ต้องกดดูจึงจะเห็นtrue/falseFalse.
firstlineตัวเลขบรรทัดตัวเลข1
gutterแสดงตัวเลขบรรทัดtrue/falseTrue
highlightHighlight บรรทัดที่ต้องการตัวเลขบรรทัดคั่นด้วย , 
htmlscriptHighlight ส่วนที่เป็น html มีประโยชน์เวลาเขียน html ปนกับภาษาอื่นๆtrue/falseFalse
smart-tabsเปิดใช้ smart-tabstrue/falseTrue
tab-sizeระยะห่างของ tabตัวเลข4
toolbarแสดง toolbartrue/falseTrue

ตัวอย่าง

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

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

About the author

phunsanit administrator

    Leave a Reply