Tuesday, March 30, 2010

แสดงรหัสโปรแกรมบนบล็อก (Syntax Highlight on Blog)

สำหรับผู้ที่ใช้บล็อก เช่น blogspot และต้องการแสดงผลรหัสโปรแกรมให้สวยงาม สามารถทำได้ดังนี้ครับ
วิธีแรก
ใช้บริการของ http://hilite.me/ แค่แปะโค้ดของเรา เลือกภาษาที่ต้องการ แล้วก๊อป HTML โค้ดมาแปะ เรียบร้อยสวยงามครับ เช่น จากเดิม
#include<iostream>
using namespace std;

int main()
{
    cout<<"Hello World!";
    system("PAUSE");
    return 0;
}

เป็น
#include<iostream>
using namespace std;

int main()
{
    cout<<"Hello World!";
    system("PAUSE");
    return 0;
}


วิธีที่สอง
ใช้ Syntax highlighter
1. แก้ไข template ของบล็อก โดยเพิ่มคำสั่งต่อไปนี้ ในส่วนของ head แท็ก (ต้นๆ เลยก็ดีครับ)
 <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/shThemeDefault.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/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.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/shBrushJava.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/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.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/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.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>
ให้เลือกเฉพาะภาษาโปรแกรมที่ต้องการ hilight ครับ ส่วนที่ไม่ต้องการก็ลบออกได้

2. จากนั้น ในส่วนของเนื้อหาที่ต้องการ hilight ก็เข้าไปแก้ไข html โดยใช้คำสั่งต่อไปนี้
<script type="syntaxhighlighter" class="brush: cpp"><![CDATA[
รหัสโปรแกรม
]]></script>
ให้สังเกตว่าในที่นี้ใช้ภาษาซีพลัสพลัสครับ

>
ปล. อย่าลืม เปิดจาวาสคริปต์ให้เว็บ http://alexgorbatchev.com และเว็บ http://amazonaws.com ด้วยนะครับ

ที่มา:
1. http://alexgorbatchev.com/wiki/SyntaxHighlighter
2. http://blog.cartercole.com/2009/10/awesome-syntax-highlighting-made-easy.html
3. http://geektalkin.blogspot.com/2009/11/embed-code-syntax-highlighting-in-blog.html

No comments:

Post a Comment