bloger ไม่มีระบบช่วยในการโพสซอร์ทโค้ทเหมือนเวิร์ดเพลส์ แต่ก็แก้ได้ไม่ยากครับ
ขั้นตอนติดตั้งเพิ่มเติม
- ล็อกอินแล้วเข้าไปที่ > การออกแบบ > แก้ไข HTML
- ใส่[sourcecode language=”html”]<!–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–>[/sourcecode]ลงไปก่อน เท็ก
บันทึกข้อมูล - ถ้าต้องการโพสภาษาอื่นๆ นอกจาก css ,javascript ,php ,sql ,xml ให้เพิ่มบรรทัด
ดูได้จากเว็บ http://alexgorbatchev.com
จากนั้นเราก็สามารถไปเขียนบทความตามปกติเมื่อต้องการใส่โค้ท มีให้เลือก 2 วิธี
- [sourcecode language=”html”]<pre class="brush:ภาษาที่ใช้">
ซอร์ทโค้ท</pre>[/sourcecode]วิธีนี้ข้อดีคือเป็นมาตราฐานไม่มีปัญหากับ RSS readers แต่โค้ทภายในจะต้องใช้ html escaped โดยสามารถใช้ Quick Escape ช่วยแปลงให้ - [sourcecode language=”html”]<script type="syntaxhighlighter" class="brush:ภาษาที่ใช้"><![CDATA[
ซอร์ทโค้ท
]]></script>[/sourcecode]วิธีนี้ข้อดีคือไม่ต้องแปลง 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 |
ตัวอย่าง[sourcecode language=”html”]<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">…</pre>[/sourcecode]
เรื่องที่เกี่ยวข้อง การ post source code บน WordPress
About the author