WeB LoG'S JuUiER: Publish Source code in Blogger

โพสซอสโค้ดใน 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 ใช้เอง

อ้างอิง

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

WeB LoG'S JuUiER

Tuesday, May 25, 2010

Publish Source code in Blogger

No comments:

Post a Comment