- โพสซอสโค้ดใน blogger เป็นเรื่องที่ไม่ค่อยน่าประทับใจนัก
- เพราะเราต้องปรับหรือเรียกใช้ html tag เองแล้วแต่เหมาะสมกับ theme
- บทความหลายๆ บทความในบล็อคนี้ หลายบทความเป็นการ coding
- ซึ่งแต่ก่อนเราก็ใช้ theme ที่มีการแสดงผลเต็มจอ แต่พอเราเปลี่ยน theme
- โค้ดที่เราโพสไว้ที่ครอบด้วย tag pre มันเกินขอบหน้าแสดงเนื้อหาไปทับส่วนอื่นซะงั้น
- เลยต้องหาวิธีแก้ไขซะ หน่อย ตอนแรกก็คิดว่าเอา tag div มาครอบทำบาร์เลื่อนไปมาเฉยๆ
- แต่พอไปเจอบทความของต่างประเทศเข้าเขียนไว้เกี่ยวกับไฮไลโค้ดใน blogger
- ก็เลยได้เรื่องเขียนลงล็อคเราซะงั้น
สำหรับเราใช้ blogger ฟรี1) เข้า blogger ไปที่ Layout => Edit HTML ให้เรานำโค้ดประมาณนี้ไปวางก่อน <head>
<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js'/>
หมายเหตุ: เราจะโพสเป็นภาษาอื่นๆ ให้เราเพิ่ม บรรทัด <script ... shBrushXXX.js' /> ให้เราเปลี่ยนตามภาษาโค้ดเราได้เลย
2) วางโค้ดส่วนนี้ก่อน </body>
<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
3) ถ้าโค้ดเรามีอักษรพิเศษ เราต้องเข้ารหัสให้เป็น HTML Code ซะก่อน เช่น ในโค้ดเรามี
< -- > ให้เราเปลี่ยนเป็น
< -- > หรือเข้ารหัสที่
This link ...4) วาง tag pre ครอบโค้ดโปรแกรมเราซะ
<pre name="code" class="Cpp">
….My code here…
</pre>
หมายเหตุ: เราสามารถใช้ tag div มาช่วยให้โค้ดอยู่ในกรอบได้
<div style=width:500;overflow:auto>
<pre name="code" class="csharp">
….My code here…
</pre>
</div>
5) จบครับพี่น้องสำหรับโพสโค้ดลง free blogger
---------------------------------------------------
สำหรับคนมี host ใช้งาน1) Include
SyntaxHighlighter.css file ที่บนสุดของ page (คงประมาณวางก่อน </head>)
<link type="text/css" rel="stylesheet" href="/php/js/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
2) ด้านล่างของ page ให้เรา include โค้ดเนี๋ย (คงวางประมาณก่อน </body>)
<script language="javascript" src="/php/js/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="/php/js/dp.SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="/php/js/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript" src="/php/js/dp.SyntaxHighlighter/Scripts/shBrushPython.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
3) สุดท้ายแหละให้เราวางโค้ดที่เราจะโพสลงบล็อคเราระหว่าง
<pre name="code" class="html">
<!-- code here -->
</pre>
<pre name="code" class="python">
<!-- code here -->
</pre>
4) จบครับพี่น้องสำหรับโพสโค้ดสำหรับ บล็อคที่มี host ใช้เอง
อ้างอิง