Syntax Highlighter คือ การแสดงผล Code ภาษาต่างๆ อาทิ PHP, Java, C++, Javascript หรือแม้กระทั่ง SQL และ CSS ในรูปแบบที่ดูง่ายและสวยงาม

ซึ่งในบทความนี้เราจะนำ SyntaxHighlighter มาใส่ใน Blogger ของเรานั่นเอง

ตัวอย่างการแสดงผลของ Syntax Highlighter


Step 1 สร้าง ลิงค์ javascript และ css ของ Syntax Highlighter
โดยเข้าไปสร้างได้ที่
http://www.mybloggerlab.com/2012/07/how-to-add-syntax-highlighter-v3-in_31.html
เมื่อเข้าลิงค์ไปเลื่อนลงมาซักเล็กน้อยจะเจอหน้าตาดังนี้
  1. เลือก Theme ของ SyntaxHighlighter อยากได้หน้าตาแบบไหนก็จัดไปโลด
  2. เลือกภาษาที่จะให้ทำการ Highlight 
  3. กด Generate
  4. Copy code ไว้ก่อน


Step 2 นำ Code ที่ copy จากด้านบนมาใส่ใน Blog ของเรา
โดยเข้าเมนูดังนี้
  1. Template (แม่แบบ)
  2. Edit HTML (แก้ไข HTML)
  3. พอกดข้อ(2) แล้วจะเจอหน้า code HTML ของเรา ให้เลื่อนลงไปล่างสุดของ code หรือ ค้นหา 
        </body>
</html>
  4. Paste code ที่เรา Copy ไว้ ในตำแหน่ง "ก่อน" ข้อความในข้อ(3) ดังนี้ 
        <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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
    <script type='text/javascript'>
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.all();
    </script>
  </body>
</html>


Step 3 การใช้งาน Syntax Highlighter
การใช้งาน Syntax Highlighter นั่นทำได้ไม่ยาก(แต่ก็ไม่ง่ายซักเท่าไร ;))
  1. ก่อนอื่นเลยก็เข้าไปที่ "สร้างบทความ"ตามปกติ ซึ่งในหน้านั้นจะมีปุ่มสลับโหลดการเขียนมาเป็น HTML โหมด (มุมซ้ายบน) ให้กดเลือก HTML นะครับ
  2. ใส้โค้ดดังต่อนี้ลงไป
สำหรับ CSS
<pre class="brush:css;">ADD-THE-CSS-CODE-HERE </pre>
สำหรับ HTML
<pre class="brush:html;">ADD-THE-HTML-CODE-HERE </pre>
สำหรับ Javascript
<pre class="brush:javascript;">ADD-THE-JavaScript-CODE HERE </pre>
ส่วนๆ เพื่อนคนไหนอยากได้ภาษาอะไรก็จัดไปตามที่ Generate มาใน Step1 ได้เลยนะครับ
เพียงแค่นี้เราก็สามารถใช้งาน Syntax Highlighter  ได้แล้วนะครับ


ปล. นอกจาก Syntax Highlighter แล้วยังมีเจ้าอื่นๆ ให้ลองเล่นอีกนะครับ ใครสนใจก็ตามลิงค์นี้ไปเลยครับ
http://zoomzum.com/10-syntax-highlight-javascript-plugins/