jnithi: ทดสอบ Syntax Highlighter

ผมได้ลองเขียน blog เกี่ยวกับการเขียนโปรแกรมหลายๆที่ พบว่าปัญหาสำคัญอย่างหนึ่งคือการเขียน source code บน blog ซึ่งมันจัดยากมากครับ เพราะต้องเขียน html tag แล้วถ้าอยากให้มีสีสรรก็ต้องกำหนด style ให้มันอีกค่อนข้างเสียเวลาทีเดียวครับ หรือบางทีขี้เกียจก็ copy เป็นรูปมาแต่ว่ามันทำให้ copy source code ไม่ได้นี่สิ ทำให้รู้สึกไม่ค่อย work เลยหยุดเขียน blog เกี่ยวกับการเขียนโปรแกรมไปดื้อๆ

คราวนี้ได้มา search เจอ Syntax Highlighter ซึ่งพัฒนาด้วย javascript ที่ code.google.com น่าสนใจมากครับ ก็เลยเอามาลองที่ blogger ซะเลย แต่ว่าลองใช้เวอร์ชัน 2.x.x แล้วยังไม่ได้ เลยมาลองใช้เวอร์ชันยอดฮิตคือ 1.5.1 ครับ

ก่อนอื่นก็ไปตั้งค่ารูปแบบ (template) ซะก่อน โดยไปที่ รูปแบบ --> แก้ไข HTML และไปเพิ่ม tag ก่อน </head>ดังนี้ครับ


<b:skin>
<link href='http://alexgorbatchev.com/pub/sh/1.5.1/styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script class='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shCore.js' type='text/javascript'/>
<script class='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shBrushCSharp.js' type='text/javascript'/>
<script class='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shBrushJScript.js' type='text/javascript'/>
<script class='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shBrushVb.js' type='text/javascript'/>
<script class='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shBrushSql.js' type='text/javascript'/>
<script class='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shBrushCss.js' type='text/javascript'/>
<script class='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shBrushXml.js' type='text/javascript'/>
</head>
<body>

และเพิ่ม script tag ก่อน </body> ครับ


<script class='javascript'>
//<![CDATA[
dp.SyntaxHighlighter.ClipboardSwf = 'http://alexgorbatchev.com/pub/sh/1.5.1/scripts/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
//]]>
</script>
</body>

สังเกตุว่ามีการเรียกใช้ dp.SyntaxHighlighter.BloggerMode(); ซึ่งเป็น function สำหรับตัด <BR /> ของ Blogger โดยเฉพาะครับ ลอง comment บรรทัดนี้เพื่อดูความแตกต่างก็ได้ครับ

วิธีการใช้งานก็คือ ตอนเราเขียน blog ให้ไปที่ แก้ไข Html แล้วไปสร้าง pre tag คลุมโค้ดที่ต้องการครับ


<pre class="html" name="code">
     เขียนโค้ดช่วงนี้ครับ
</pre>

โดยใน pre tag ให้กำหนด name attribute = "code" ครับ ส่วน class นั้น กำหนดตามประเภทโค้ดที่เราต้องการแสดง ถ้าอยากรู้ว่าต้องใส่ class เป็นอะไร ไปดูได้ที่ SyntaxHighlighter Wiki ครับ แต่ว่าเราต้องไปกำหนด <script src=...> ให้ครบนะครับ จากตัวอย่างด้านบนผมใช้แค่บางตัวเท่านั้นเอง

คราวนี้ลองทดสอบ javascript มั่ง


<script type="text/javascript">
     alert('Hello world');
</script>

แหม มันเยี่ยมจริงๆครับ

jnithi

วันพฤหัสบดีที่ ๒ กรกฎาคม พ.ศ. ๒๕๕๒

ทดสอบ Syntax Highlighter

ไม่มีความคิดเห็น: