สวัสดีครับ บทความนี้ขอมีสาระกับเค้าหน่อย (ฮา) พอดีว่าช่วงนี้ อยู่ในช่วงการฝึกงานครับ ซึ่งก็ได้เรียนรู้อะไรใหม่ๆมาเยอะแยะเลย ผมเลยเขียนบทความลงบล็อกส่วนตัว(อีกที่นึง) เก็บไว้กันลืม กับเพื่อเผยแพร่ความรู้ใหม่ให้คนอื่นๆบ้างครับ ด้วยเหตุนี้ผมเลยไปแนะนำเพื่อนๆ ให้เขียนบล็อกกัน เพราะเห็นว่าเพื่อนๆบางคนบางท่าน น่าจะมีสาระความรู้เยอะกว่าผม สามารถถ่ายทอดความรู้ออกมาได้ดีกว่า เลยแนะนำไป และเมื่อเพื่อนๆ ต้องการที่จะแทรกโค้ดลงในบทความ เพื่อนๆก็อุส่าไปแทรกปลั๊กอินลงใน head ใน html ของ template นู้น ซึ่งมันทำได้ครับ แต่ยุ่งยาก และทำให้รูปแบบ template ของบล็อกเสียหายครับ ทำให้เราไม่สามารถตั้งค่ารูปแบบ ตั้งค่าวิตเจต หรือตั้งค่าแบบง่ายๆ ได้ (มันเจ๊ง T_T )
วันนี้่ผมเลยมีวิธีง่ายๆ ซึ่งเป็นความสามารถของ blogger (บล็อกอื่นไม่รู้ทำได้มั้ย ไม่แน่ใจอ่ะ) มาบอกกัน โดยที่ไม่จำเป็นต้องเข้าไปแก้ใน HTML ของ template เลย แทั้นะ แท้นนนนนนน. . . . .......
วิธีการก็คือการใช้ SyntaxHighlighter โดยการแทรกแม่มเข้าไปในบทความเลยครับ เพราะ Blogger มีความสามารถในการรัน script ในบทความได้ด้วย (แม่ง เฉ๋งอ่ะ)
- อันดับแรก ในบทความของเราที่ต้องการเขียน (หน้า artical editer) ให้ใส่ code นี้ลงไปครับ (แนะนำให้ใส่ในท้ายบทความ มันจะได้ไม่มั่ว) โดยการใส่ ให้เลือกการเขียนเป็นแบบ HTML ก่อน แล้วแทรกโค้ด
//อันนี้เป็นตัวลิงค์ css,theme ไปยัง SyntaxHighlighter //อันเป็น core ของ script //อันเยอะๆนี้เป็น brushes ที่ใช้แสดงผลว่าจะแสดงโค้ดนั้น ออกมาในภาษาใด //แนะนำให้ใส่น้อยๆพอครับ เอาเท่าจะใช้ ยิ่งใส่เยอะ ยิ่งช้า //ผมเห็นหลายท่าน อัดมาเต็มที่ แต่ทั้งเว็บโชว์แต่โค้ด html เอวัง - -' //สั่งให้รัน script ได้
- ขั้นตอนข้างต้นก็เป็นการติดตั้ง เพื่อให้สามารถใช้งานโค้ดได้ครับ ต่อมา ก็ถึงการนำไปใช้ครับ
วิธีการนำไปใช้ ก็เพียงแค่นำแท็ก <pre> ไปครอบโค้ดได้เลยครับ เช่น
<pre class="brush:html;>
<head>
<title>Test</title>
</head>
<body>
<?
echo "Hello World!";
?>
</body>
</html>
</pre>
โดยหลังแท็ก brush:javascript; ตรงนี้ เราสามารถใส่ได้เลยว่าจะให้ code blog แสดงออกมา syntax ของภาษาใด โดย brush นั้น จะต้องมีตามที่เราลงไว้ในขั้นแรก และสามารถดูการเรียกใช้ brush จาก Bundled Brushes ลิงค์นี้ได้เลยครับ
เรียบร้อยครับ การแทรกโด้ดโดยใช้ SyntaxHighlighter โดยไม่ต้องเข้าไปแก้ถึงใน html template ครับ ง่ายนิดเดียวเอง เย้เย้เย้
โต้....
ช่าย...ใส่ได้ 2 ที่คือแทรกลองใน template หรือ ใน HTML/script แล้วเรียกใช้เหมือนกันเลย...แล้วแต่ใครชอบแล้วกานนนน...........อิอิ
ReplyDeleteโค้ดที่เป็น < และ > ควรเปลี่ยนเป็น < และ > บางกรณีมันจะมีปัญหาอยู่บ้าง
ReplyDeleteครับ เท่าที่พบจะเป็นแท็ก head ของโค้ดพวก html ที่จะมีปัญหาครับ ส่วนอันอื่น(แทบ)ไม่มีปัญหาเลย
Deleteกำาา มันไม่ขึ้น < แทนด้วย & l t ; และ > แทนด้วย & g t ; ติดกันหมดนะ
Deleteครับ เท่าที่ผมใช้มา ภาษาอื่นๆ ไม่มีปัญหานะครับ ใช้ >, < ได้เลย จะมีปัญหาก็พวกแท็ก html ครับ
Deleteแก้ปัญหาโดย
ให้แทน < ด้วย <
ส่วน < แทนด้วย >