การใส่ syntax highlighting ใน blogger

สวัสดีครับ สำหรับบทความนี้เรามาแนะนำวิธีการใส่ syntax highlighting ใน blogger กันครับ ซึ่งสำหรับคนที่เขียนบล็อกเกี่ยวกับการเขียนโค้ดต่าง ๆ การจะใส่โค้ดลงไปนั้นอาจจะทำให้กลมกลืนกับเนื้อหา มองดูลำบาก ดังนั้น syntax highlighting สามารถช่วยคุณได้ วิธีการก็ตามนี้ครับ

1. ให้ไปที่ส่วนจัดการ Blogger แล้วไปที่ Template

2. ให้กด Edit HTML

3. จะปรากฎ Code ขึ้นมา ให้มองหาแท็กปิด Head ซึ่งก็คือ

</head>

4. ให้ก็อปปี้โค้ดตามล่างนี้ไปใส่เหนือแท็กปิด Head

<!-- Syntax Highlighter Additions START -->
<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/shThemeEmacs.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/shBrushAS3.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript" />
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Additions END Credit www.doesystem.com -->

5. จากนั้นก็ทำการเซฟ Template ได้เลย

6. ให้ทดลองโพสเนื้อหาที่เป็นโค้ด เช่น

<pre class="brush:php;">
<?php
$example = range(0, 9);
foreach ($example as $value)
{
 echo $value;
}
</pre>

เพียงแค่นี้เราก็ได้ syntax highlighting ใน blogger ซึ่งมีสีสันสวยงาม ทำให้น่าดูและเข้าใจง่าย เหมาะสำหรับ blogger ที่มีเนื้อหาเกี่ยวกับ Code