PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

แสดง Code สวยๆ Style Google ด้วยเครื่องมือที่เรียกว่า SyntaxHighlighter

25 September 2008 By


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

 

เอาล่ะคับ มาดูกันเลยดีกว่าว่าต้องเราต้องมีอะไรบ้าง
สิ่งแรกเลยต้อง Download File Script สำหรับช่วยในการสร้าง Style ของเราไปก่อน

จากนั้นเราก็แตก file ไปไว้ที่เดียวกันกับหน้าเว็บที่เราเก็บไว้
จากนั้นมาดูส่วนที่เราจะต้องมีในหน้าเว็บกันบ้างน่ะคับ
สิ่งแรกเลยก็คือ ส่วนที่เราจะทำการเรียกใช้ Script ของเรา
  1. <link type="text/css" rel="stylesheet" href="./Styles/SyntaxHighlighter.css"></link>
  2. <link href="./Styles/TestPages.css" rel="stylesheet" type="text/css">
  3. </link>

ส่วนส่วนข้างบนนี้ให้เอาไว้ระหว่าง<head>…</head>

หลังจากนั้น Script อีกอันหนึ่งที่เราจะต้องเพิ่มเข้าไปเพื่อดึง script มาใช้นั้นก็คือ
  1. <script class="javascript" src="./Scripts/shCore.js"></script>
  2. <script class="javascript" src="./Scripts/shBrushCSharp.js"></script>
  3. <script class="javascript" src="./Scripts/shBrushPhp.js"></script>
  4. <script class="javascript" src="./Scripts/shBrushJScript.js"></script>
  5. <script class="javascript" src="./Scripts/shBrushJava.js"></script>
  6. <script class="javascript" src="./Scripts/shBrushVb.js"></script>
  7. <script class="javascript" src="./Scripts/shBrushSql.js"></script>
  8. <script class="javascript" src="./Scripts/shBrushXml.js"></script>
  9. <script class="javascript" src="./Scripts/shBrushDelphi.js"></script>
  10. <script class="javascript" src="./Scripts/shBrushPython.js"></script>
  11. <script class="javascript" src="./Scripts/shBrushRuby.js"></script>
  12. <script class="javascript" src="./Scripts/shBrushCss.js"></script>
  13. <script class="javascript" src="./Scripts/shBrushCpp.js"></script>
  14. <script class="javascript">
  15. dp.SyntaxHighlighter.ClipboardSwf = 'Scripts/clipboard.swf';
  16. dp.SyntaxHighlighter.HighlightAll('code');
  17. </script>
  18. </code>

ซึ่งส่วนนี้ให้เอาไว้ก่อน Tag </body>

จากนั้นมาดูในส่วนของ Code กันบ้างดีกว่าว่าเราจะใส่อย่างไร เช่น
  1. <pre name="code" class="php">
  2. /***********************************
  3. ** Multiline block comments
  4. **********************************/
  5. <html>
  6. <body>
  7. ....เนื้อหาต่างๆจ้า...
  8. </body>
  9. </html>
  10. </pre>


จะสังเกตุได้น่ะคับว่าเราจะใส่ code เอาไว้ใน tag <pre>…</pre>
ซึ่ง tag <pre> นั้นเอาไว้กำหนดภาษาของ Code ว่าเป็นภาษา เช่น

<pre name=”code” class=”php”>…Code PHP…<pre>
<pre name=”code” class=”ruby”>…Code RUBY…<pre>
<pre name=”code” class=”vb”>…Code SQL…<pre>
<pre name=”code” class=”vb”>…Code VB…<pre>
<pre name=”code” class=”c-sharp”>…Code C#…<pre>
<pre name=”code” class=”xml”>…Code XML…<pre>
<pre name=”code” class=”html”>…Code HTML…<pre>


และอีกอย่างคือเครื่องหมาย < ให้เราใส่เป็น <
นอกจากนี้ยังกำหนดลักษณะของการแสดง Code ในลักษณะต่างๆได้ เช่น ไม่ให้แสดงหมายเลขด้านหน้า Code ก็ใส่เป็น

<pre name="code" class="html:nogutter“>…Code HTML…<pre>


Tags:: google css style code syntaxhighlighter





URL สำหรับอ้างอิง