Tuesday, May 25, 2010

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 ซะก่อน เช่น ในโค้ดเรามี < -- > ให้เราเปลี่ยนเป็น &lt; -- &gt; หรือเข้ารหัสที่ 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 ใช้เอง

อ้างอิง

No comments:

Post a Comment