การ post source code บน WordPress

Byพิชญ์ พันธุ์สนิท

การ post source code บน WordPress

เราสามารถ post code บน WordPress ได้อยู่แล้วแต่จะอ่านยากมาก ไม่มีทั้งบรรทัด ทั้งสีสันอะไรเลย จะจัดเองก็ลำบาก จะให้เค้า copy ก็ไม่สะดวกเท่าที่ควร tag code ก็ใช้ได้ไม่ตรงวัตถุประสงค์เท่าไหร่

wordpress version ใหม่ไม่ต้องลง plugin เพิ่มให้ใช้
[ code language=”ภาษาของ code”]
พิมพ์ code ไว้ตรงนี้
[/code]
(พิมพ์ [ ติดกับ code นะครับ)
Posting Source Code

ความจริง worldpress ได้มีตัวช่วยอำนวยความสะดวกแบบนี้ให้อยู่แล้ว ถ้าใช้ wordpress.com จะติดตั้งเอาไว้ให้แล้วแต่ถ้าลง wordpress บน server ของตัวเองก็ต้องลง plugin SyntaxHighlighter Evolved จากลิงค์ http://wordpress.org/plugins/syntaxhighlighter ก่อนครับ ตัวมันจะไม่มี gui ให้ ต้องพิมพ์

[ sourcecode language=”ภาษาของ code”]
พิมพ์ code ไว้ตรงนี้
[/sourcecode]
(พิมพ์ [ ติดกับ sourcecode นะครับ)

โดยสามารถเลือกแสดงภาษาต่างๆ จากด้านล่าง

  • actionscript3
  • bash
  • ColdFusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • ruby
  • scala
  • sql
  • vb
  • xml

เท่านี้ก็จะแสดงได้สวยงามแล้ว หรือจะปรับแต่งการแสดงผลเพิ่มอีก

ตัวแปร หน้าที่ ตัวเลือก ค่าตั้งต้น
autolinks ทำให้ Uri ภายในสามารถ คลิกได้ true/false true
collapse จะยุบส่วนแสดง code เอาไว้ก่อน ต้องกดดูจึงจะเห็น true/false False.
firstline ตัวเลขบรรทัด ตัวเลข 1
gutter แสดงตัวเลขบรรทัด true/false True
highlight Highlight บรรทัดที่ต้องการ ตัวเลขบรรทัดคั่นด้วย ,
htmlscript Highlight ส่วนที่เป็น html มีประโยชน์เวลาเขียน html ปนกับภาษาอื่นๆ true/false False
light จะซ่อนส่วนแสดงเลขบรรทัดและ toolbar ถ้ามีไม่กี่บรรทัด true/false False
padlinenumbers ควบคุมการระยะห่างการแสดงเลขบรรทัด

  • true จะปรับระยะโดยอัตโนมัติ
  • false จะไม่ปรับระยะให้
  • ตัวเลข กำหนดเอง
true/false/ตัวเลข
toolbar แสดง toolbar true/false True
wraplines สลับสีของแต่ละบรรทัด true/false True

ถ้ากำหนด

<?php
echo "<h1>สวัสดีชาวโลก</h1>"
?>

(พิมพ์ [ ติดกับ sourcecode ไม่ต้องเว้นวรรค) จะได้

<?php
echo "<h1>สวัสดีชาวโลก</h1>"
?>

About the author

พิชญ์ พันธุ์สนิท administrator

You must be logged in to post a comment.