รวมวิธีการใช้ Wordpress, Joomla, Drupal, Magento และ SEO » code

Plugin Highlight code ใน joomla

snappy — Thu, 29 Apr 2010 14:57:33 +0000

Plugin ตัวนี้จะช่วยให้เราแทรกโค็ดลงในเนื้อหาทำได้ง่ายขึ้น (แทรกคือไม่ให้โค๊ดแสดงผลหรือทำงานเพียงแค่แสดงโค๊ดให้ดูเท่านั้น) คือเมื่อเราต้องแสดงโค็ดออกมาทางเนื้อหาจะมีปุ่มให้กดเพิ่ม และใส่โค็ดลงไป เหมาะสำหรับเว็บไซต์ที่สอนแนวการเขียนเว็บ หรือเขียนโค็ดโปรแกรมคอมพิวเตอร์ต่างๆ การแสดงผลก็ตามรูปครับ

ให้เราทำการติดตั้ง Plugin Highlight code with Jumi มาทำการติดตั้งกันก่อน โดยโหลดมาแล้วให้แตกไฟล์ออกมา จะมี plugin อยู่สองตัวให้ทำการติดตั้งลงไปครับ

จากนั้นไปที่ Extension > Plugin Manager ค้นหา plugin ทั้งสองอันแล้วทำการเปิดการใช้งาน

และกดคลิกที่ Highlight code with Jumi เพื่อเข้าไปทำการตั้งค่าเพิ่มเติม

max-height กำหนดความสูงเยอะสุด
width กำหนดความกว้าง
Codes hidden ให้ซ้อนโค็ดไว้หรือไม่

เมื่อเราทำการเพิ่มบทความจะมีปุ่มเพิ่มโค็ดมาให้ใช้งาน

Link download : http://extensions.joomla.org/extensions/edition/code-display/7475

Plugin : SyntaxHighlighter แสดง code สวยๆบน wordpress

snappy — Mon, 29 Jun 2009 10:57:12 +0000

เป็น plugin ที่ผมตามหามานานแสนนาน สำหรับ plugin ในลักษณะแบบนี้ มันเอาไว้ใช้แสดง code ที่เราจะพิมพ์ออกมาในหน้าบทความเราให้ออกมาในรูปแบบที่ดูง่ายขึ้น มีการไฮไลท์สี และแสดงบรรทัด เหมาะสำหรับบทความที่ต้องการสอนเรื่องในการเขียน code ของภาษาต่างๆ เช่น CSS , PHP , HTML เป็นต้น ซึ่งผมถูกใจมากที่สุด เพราะเป็นปัญหามาโดยตลอดในการเขียนใส่ลงในเนื้อหาเพื่อให้แสดงผลออกมาในรูปแบบ code ให้คนที่เข้าชมเว็บเราสามารถ copy นำไปใช้งานได้เลย

โดยให้เราดาวโหลด SyntaxHighlighter มาทำการติดตั้งบน wordpress ของเราครับ แล้วทำการ Active ตัว plugin ครับ

จากนั้นถ้าต้องการปรับแต่งค่าต่างๆให้ไปที่ Settings >> SyntaxHighlighter

วิธีใช้งานน่ะครับ เขียนเนื้อหาปกติอะครับ แต่ถ้าจะใส่ code ที่จะสอนลงไปก็ตามนี้ครับ

ใส่ code ที่ต้องการ

รูปภาพด้านล่างคือตัวอย่างการแสดงผลออกมาครับ

Link : http://wordpress.org/extend/plugins/syntaxhighlighter/