PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

25 September 2008 By
css google syntaxhighlighter style code

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css google syntaxhighlighter style code



มาอีกแล้วคับสำหรับวันนี้ ในวันนี้นั้นเราก็ขอนำเสนออีกเครื่องหนึ่งที่จะช่วยให้ 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:: syntaxhighlighter css google style code






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


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