semicolon.in.th Programming is real fun!

เรื่องเกิดจากผมไปเห็น Syntax Highlight ที่เวบของ Brandon Savage
ทำให้เกิดกิเลสอยากได้มาไว้ในเวบของตัวเองบ้าง
เพราะเวบเราก็น่าจะมีตัวอย่าง code อยู่เยอะพอสมควร เอ... แต่หลัง ๆ มานี่ก็ไม่ค่อยมี code แฮะ อิอิ

ลอง Google ดูก็พบในเวลาอันรวดเร็วก็คือ Module Syntax Highlighter นั่นเอง

วิธีการใช้งาน ก็ไม่ยากเย็นครับ (สรุปมาจาก README.txt ที่มากับ Module)

1. Download JavaScript library จาก http://alexgorbatchev.com/wiki/SyntaxHighlighter
แล้วมา extract ไว้ที่ sites/all/libraries/syntaxhighlighter/
2. Enable module Syntax Highlighter
3. Enable Syntaxhighlighter filter ใน Menu Administrator > Input formats ของ Drupal (/admin/settings/filters)
4. สำหรับผู้ที่ถนัดใช้ tag pre ให้ใช้ รูปแบบนี้ครับ (สมมติว่าต้องการ Highlight CSS)

span.block {
border: 1px solid gray;
background-color: #CCCCCC;
padding: 10px;
}

ก็จะได้ผลลัพธ์ตามนี้

span.block {

  border: 1px solid gray;

  background-color: #CCCCCC;

  padding: 10px;

}

5. สำหรับผู้ที่ไม่ต้องการใช้ tag pre ให้ใช้ {syntaxhighlighter} แทนดังนี้

{syntaxhighlighter brush: css}

span.block {

  border: 1px solid gray;

  background-color: #CCCCCC;

  padding: 10px;

}

{/syntaxhighlighter}

ก็จะได้ผลลัพธ์ตามนี้
{syntaxhighlighter brush: css}
span.block {
border: 1px solid gray;
background-color: #CCCCCC;
padding: 10px;
}
{/syntaxhighlighter}

วิธีการใช้งานเพิ่มเติม
1. ถ้าไม่ต้องการแถบด้านซ้ายและเลขบรรทัดทำได้โดยเพิ่ม option gutter: false เข้าไปดังนี้
{syntaxhighlighter brush: plain}
{syntaxhighlighter brush: css; gutter: false}
span.block {
border: 1px solid gray;
background-color: #CCCCCC;
padding: 10px;
}
{/syntaxhighlighter}
{/syntaxhighlighter}
ก็จะได้ผลลัพธ์
{syntaxhighlighter brush: css; gutter: false}
span.block {
border: 1px solid gray;
background-color: #CCCCCC;
padding: 10px;
}
{/syntaxhighlighter}
2. ถ้าต้องการเลข Column ด้านบนทำได้โดยเพิ่ม option ruler: true เข้าไปดังนี้
{syntaxhighlighter brush: plain}
{syntaxhighlighter brush: css; ruler: true}
span.block {
border: 1px solid gray;
background-color: #CCCCCC;
padding: 10px;
}
{/syntaxhighlighter}
{/syntaxhighlighter}
ก็จะได้ผลลัพธ์
{syntaxhighlighter brush: css; ruler: true}
span.block {
border: 1px solid gray;
background-color: #CCCCCC;
padding: 10px;
}
{/syntaxhighlighter}
3. Option ต่าง ๆ สามารถนำมาใช้ร่วมกันได้
สามารถดู Option ทั้งหมดที่มีได้ที่ http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration

สงสัยจะได้นั่งเปลี่ยน code ในเวบนี้อีกหลายวัน หึหึ