bloger ไม่มีระบบช่วยในการโพสซอร์ทโค้ทเหมือนเวิร์ดเพลส์ แต่ก็แก้ได้ไม่ยากครับ
ขั้นตอนติดตั้งเพิ่มเติม
- ล็อกอินแล้วเข้าไปที่ > การออกแบบ > แก้ไข 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-->
ลงไปก่อนเท็ก </head> บันทึกข้อมูล
- ถ้าต้องการโพสภาษาอื่น ๆ นอกจาก css, javascript, php, sql, xml ให้เพิ่มบรรทัด
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/ไฟล์รูปแบบ (brush) " type="text/javascript"></script>
ดูได้จากเว็บ http://alexgorbatchev.com
จากนั้นเราก็สามารถไปเขียนบทความตามปกติเมื่อต้องการใส่โค้ท มีให้เลือก 2 วิธี
-
<pre class="brush:ภาษาที่ใช้"> ซอร์ทโค้ท </pre>
วิธีนี้ข้อดีคือเป็นมาตราฐานไม่มีปัญหากับ RSS readers แต่โค้ทภายในจะต้องใช้ html escaped โดยสามารถใช้ Quick Escape ช่วยแปลงให้
-
<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
อ่านเพิ่มเติม