17 October 2011

Syntax Highlighter (เอา code แสดงในเว็บไซต์)

เนื่องจาก เว็บไซต์หรือเว็บบอร์ด แต่กระทั้ง Blog ของผมเองก็ต้องมีการ นำ code demo มาให้ดูกัน แต่การที่ต้องก๊อปปี้ วางเอาดื้อๆ ก็กระไรอยู่ ไปเห็นเว็บที่ทำ Demo Coding ต่างๆ เค้าทำก็เลยหาวิธีทำบ้าง 555 อยากเท่กับเค้าบ้างครับ เลยจัดสักหนึ่งผลงานเพลง ตับ ตับ ๆ เลย

อ้าว!! มาเริ่มกันเลยครับ 

ขั้นแรก  นำโค๊ดด้านล่างนี้ไปใส่ไว้ใน ส่วนของ <head>.....</heard> ของเว็บนะครับ
 


เมื่อเสร็จขั้นตอนแรก ต่อไปก็เป็นส่วนของการใส่ Syntax Highlighter กับข้อความที่เป็นโค๊ดของเราแล้วเด้อ ในการใส่ Code ก็ใส่ตาม page ต่างนั้นที่เราสร้างนั้นแหละครับ ตัวอย่างนะครับ
void main()
{
printf("Hello Greanjub!!");

}

จากนั้นก็จะได้ผลเป็นอย่างข้างล่างนี้ครับ

void main()
{
printf("Hello Greanjub!!");

}

ในการใส่จากข้างบน สังเกตตรง class="brush: c;" เป็นการบอกว่า code ที่เราใส่เข้าไปนั้นเป็น Code ภาษาอะไรนะครับ ในที่นี้ผม ใส่ class="brush: c;" เข้าไปนะครับ เพราะ code ผมเป็นภาษาซี ถ้าเป็นอื่นก็เปลี่ยนไปตามภาษาที่ต้องการใส่นั้นแหละครับ แค่นี้ก็เสร็จแล้ว

ภาษาที่สามารถใช้ได้ใน Syntax Highlighter มี

          o bash , shell
          o cpp , c
          o c# , c-sharp , csharp
          o css
          o delphi , pascal
          o diff , patch
          o groovy
          o java
          o js , jscript , javascript
          o perl , Perl , pl
          o php
          o text , plain
          o py , python
          o ruby , rails , ror
          o scala
          o sql
          o vb , vbnet
          o xml , xhtml , xslt , html , xhtml



ถ้าต้องการไฟล์ java และ styles ของ Syntax Highlighter  ดาวน์โหลดได้ที่นี่ครับ 
:http://bc46.com/Bc46_Upload/download.php?file=2cd03598c671aa88984c22d750e462d8

แค่นี้เราก็สามารถนำ code ไปวางในเว็บไซต์ของเราได้แล้วครับ
ขอบคุณ แหล่งอ้างอิง : http://bc46.com/forum/index.php?topic=465.0 
และ  http://tonhor.exteen.com/20090411/howto-syntax-highlighter-on-exteen

No comments:

Post a Comment