วิธีใส่ source code ใน Blogger ด้วย SyntaxHighlighter

ใน Blogger เราสามารถใส่ส่วนที่เป็น source code ได้เหมือนกันค่ะ เพียงแต่การใช้งานอาจจะยุ่งยากนิดนึง ไม่เหมือน wordpress ที่แทบจะทำให้ทุกอย่างแค่ก็อปวาง ก็อย่างว่าแหละ ของฟรีนี่เนอะ

วิธีติดตั้ง

1. ล็อกอินเข้าหน้าหลัก Blogger เลือกแท็บ Template กด Edit HTML

2. กด Ctrl+F ตรงพื้นที่โค้ด หาคำว่า </head>

3. ใส่โค้ดด้านล่างตรงก่อนคำว่า </head>

ปล. อันนี้ เราคอมเม้นท์ส่วนบรัชของภาษาที่เราไม่ค่อยใช้ไว้นะคะ และก็ถ้าจะเปลี่ยนธีมอื่นๆ ก็เปลี่ยนจาก shThemeDefault.css (บรรทัด 4) เป็นชื่ออันอื่นตามในนี้ได้เลย
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

<!-- SyntaxHighlighter by Alex Gorbatchev -->

<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/shBrushCSharp.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/shBrushCss.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/shBrushJava.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/shBrushPlain.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/shBrushXml.js' type='text/javascript'></script>
<!-- unused languages
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
-->

<script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

การใช้งาน

1. กดวางโค้ดที่จะใส่ในโพสท์ปกติ

2. กดสวิตช์ไปโหมด HTML แล้วคลอบส่วนหัวท้ายของโค้ดนั้นๆ ด้วยแท็ก pre

เช่น ตัวอย่าง Class ใน PHP อย่างง่าย ใส่โค้ดในโหมด HTML ดังนี้

class SimpleClass
{
    // property declaration
    public $var = 'a default value';

    // method declaration
    public function displayVar() {
        echo $this->var;
    }
}

จะแสดงได้ ดังนี้

class SimpleClass
{
    // property declaration
    public $var = 'a default value';

    // method declaration
    public function displayVar() {
        echo $this->var;
    }
}

แต่ว่าที่เห็นนี่มันจะสลับสีบรรทัดนะคะ อันนี้เราเอาธีม default มาแก้เอง

Verzaru's Notes