Easy Installation Adding SyntaxHighlighter to your Blogger


ทำมาหลายครั้งแล้วก็ลืม การเอา SyntaxHighlighter มาใส่ใน blogger ไม่ได้ยากเย็นอะไร เพียงแต่ต้องไปแก้ไขที่ตัว HTML มันเท่านั้น ซึ่งหากมีการเลือก theme ใหม่ หรือ เปลี่ยนรูปแบบ เราก็ต้องทำแบบนี้ทุกครั้ง เพราะ code ที่ใส่เข้าไปมันจะถูกล้างออกและทับด้วย template รูปแบบใหม่

วิธีการง่ายๆ โดย copy code ในช่องนี้


<!-- SyntaxHighlighter -->
    <link href='http://alexgorbatchev.com/pub/sh/3_0_83/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/3_0_83/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/3_0_83/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/3_0_83/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/3_0_83/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/3_0_83/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/3_0_83/scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/3_0_83/scripts/shBrushXml.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/3_0_83/scripts/shBrushPlain.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/3_0_83/scripts/shBrushSql.js' type='text/javascript'/>
    <script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/3_0_83/scripts/clipboard.swf&#39;;
    SyntaxHighlighter.all();
    </script>

จากนั้นเข้าไปที่ แม่แบบ -> แก้ไข HTML


จากนั้นวาง code ดังกล่าวก่อนถึง tag </head> แล้วบันทึก

สำหรับการใช้งานให้ใช้

<pre class="brush:syntax">you code here</pre>

ศึกษาเพิ่มเติมได้ที่
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

ปล. ตัวที่ผมใช้ เป็น version ล่าสุด 3.0.83 ณ วันที่ 7 มิถุนายน 2014

ป้ายกำกับ: , , ,