- โพสซอสโค้ดใน blogger เป็นเรื่องที่ไม่ค่อยน่าประทับใจนัก
- เพราะเราต้องปรับหรือเรียกใช้ html tag เองแล้วแต่เหมาะสมกับ theme
- บทความหลายๆ บทความในบล็อคนี้ หลายบทความเป็นการ coding
- ซึ่งแต่ก่อนเราก็ใช้ theme ที่มีการแสดงผลเต็มจอ แต่พอเราเปลี่ยน theme
- โค้ดที่เราโพสไว้ที่ครอบด้วย tag pre มันเกินขอบหน้าแสดงเนื้อหาไปทับส่วนอื่นซะงั้น
- เลยต้องหาวิธีแก้ไขซะ หน่อย ตอนแรกก็คิดว่าเอา tag div มาครอบทำบาร์เลื่อนไปมาเฉยๆ
- แต่พอไปเจอบทความของต่างประเทศเข้าเขียนไว้เกี่ยวกับไฮไลโค้ดใน 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>
4) วาง tag pre ครอบโค้ดโปรแกรมเราซะ
<pre name="code" class="Cpp">
….My code here…
</pre>
<div style=width:500;overflow:auto>
<pre name="code" class="csharp">
….My code here…
</pre>
</div>
---------------------------------------------------
สำหรับคนมี 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>
อ้างอิง
- http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html
- http://blog.gpowered.net/2007/07/howto-post-code.html
- http://www.string-functions.com/htmlencode.aspx
- http://blog.giladnaor.com/2009/02/source-code-highlighting-in-blogger.html
- http://www.webmasterworld.com/forum21/10296.htm
- http://programming.top54u.com/post/HTML-Div-Tag-Overflow-CSS-Style-Scrollbars.aspx
No comments:
Post a Comment