โชว์โค้ด PHP ใน BLOGGER โดยใช้ SyntaxHighlighter

SyntaxHighlighter ของฟรีครับเป็นตัวแสดง syntax highlighter เขียนโดยภาษา javascript ซึ่งแน่นอนครับเหมาะสำหรับใช้ใน BLOGGER ได้เพราะทำงานทางฝั่ง Client-side โดยตัวนี้สามารถโชว์โค้ดที่เป็นสีได้ในหน้า blogger ได้
วิธีการติดตั้งทำได้ตาม step นี้เลยน่ะครับ

1. ดาวโหลดไฟล์ SyntaxHighlighter . และอัพโหลดไฟล์ที่จำเป็นต้องใช้ผ่านทาง Google Page Creator
2. Login เข้าที่ BLOGGER แล้วไปที่ "Settings > Template > Edit HTML", จากนั้นก็เปลี่ยนค่าตามโค้ดด้านล่างเลยครับ
   




</div></div> <!-- end outer-wrapper -->
<link href='http://[YOUR HOST]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://[YOUR HOST]/shCore.js' type='text/javascript'/>

<script src='http://[YOUR HOST]/shBrushCpp.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushCSharp.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushCss.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushJava.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushJScript.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushSql.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushXml.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushPhp.js' type='text/javascript'/>

<script class='javascript'>
//  <![CDATA[
    function FindTagsByName(container, name, Tag)
    {
        var elements = document.getElementsByTagName(Tag);
        for (var i = 0; i < elements.length; i++)
        {
            if (elements[i].getAttribute("name") == name)
            {
                container.push(elements[i]);
            }
        }
    }
    var elements = [];
    FindTagsByName(elements, "code", "pre");
    FindTagsByName(elements, "code", "textarea");
 
 for(var i=0; i < elements.length; i++) {
  if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
   var childNode = elements[i].childNodes[0];
   var newNode = document.createTextNode(childNode.nodeValue.replace(//gi,'\n'));
   elements[i].replaceChild(newNode, childNode);
   
  }
else if(elements[i].nodeName.toUpperCase() == "PRE") {
   brs = elements[i].getElementsByTagName("br");
   for(var j = 0, brLength = brs.length; j < brLength; j++) {
    var newNode = document.createTextNode("\n");
    elements[i].replaceChild(newNode, brs[0]);
   }
  }
 }
  //clipboard does not work well, no line breaks
  // dp.SyntaxHighlighter.ClipboardSwf = 
  //"http://[YOUR HOST]/clipboard.swf";
  dp.SyntaxHighlighter.HighlightAll("code");
// ]]>
</script>
</body>
</html>


เสร็จแล้วครับวิธีเรียกใช้ก็ตามนี้เลย


<pre name="code" class="php">
... โค้ดวางตรงนี้ครับ ...
</pre>


หรือหากต้องการดูรายละเอียดดูได้ที่เวปเจ้าของที่นี่เลย syntaxhighlighter usage
3. หมายเหตุนิดนึงสำหรับหากต้องการโพสเป็น HTML code ให้เราแทนค่า
   เครื่องหมาย < ด้วย & l t ; (เขียนติดกันไม่มีช่องว่างน่ะครับ)
   เครื่องหมาย > ด้วย & g t ; (เขียนติดกันไม่มีช่องว่างน่ะครับ)
4. thank for http://developertips.blogspot.com/2007/08/syntaxhighlighter-on-blogger.html