แสดง Code สวยๆ Style Google ด้วยเครื่องมือที่เรียกว่า SyntaxHighlighter
มาอีกแล้วคับสำหรับวันนี้ ในวันนี้นั้นเราก็ขอนำเสนออีกเครื่องหนึ่งที่จะช่วยให้ Development แสดง Code ในเว็บไซต์ให้ดูสวยงาม ซึ่งจะสวยงามอย่างไรนั้นก็จะเป็นอย่างที่เราเห็นในภาพข้างบนนั้นแหละคับ ซึ่งผมคิดว่าน่าจะเป็นประโยชน์ไม่ใช่น้อยสำหรับโปรแกรมเมอร์หรือเว็บมาสเตอร์อีกหลายคนที่ต้องการแสดง Code ต่างๆ
เอาล่ะคับ มาดูกันเลยดีกว่าว่าต้องเราต้องมีอะไรบ้าง
สิ่งแรกเลยต้อง Download File Script สำหรับช่วยในการสร้าง Style ของเราไปก่อน
จากนั้นมาดูส่วนที่เราจะต้องมีในหน้าเว็บกันบ้างน่ะคับ
สิ่งแรกเลยก็คือ ส่วนที่เราจะทำการเรียกใช้ Script ของเรา
- <link type="text/css" rel="stylesheet" href="./Styles/SyntaxHighlighter.css"></link>
- <link href="./Styles/TestPages.css" rel="stylesheet" type="text/css">
- </link>
ส่วนส่วนข้างบนนี้ให้เอาไว้ระหว่าง<head> </head>
หลังจากนั้น Script อีกอันหนึ่งที่เราจะต้องเพิ่มเข้าไปเพื่อดึง script มาใช้นั้นก็คือ- <script class="javascript" src="./Scripts/shCore.js"></script>
- <script class="javascript" src="./Scripts/shBrushCSharp.js"></script>
- <script class="javascript" src="./Scripts/shBrushPhp.js"></script>
- <script class="javascript" src="./Scripts/shBrushJScript.js"></script>
- <script class="javascript" src="./Scripts/shBrushJava.js"></script>
- <script class="javascript" src="./Scripts/shBrushVb.js"></script>
- <script class="javascript" src="./Scripts/shBrushSql.js"></script>
- <script class="javascript" src="./Scripts/shBrushXml.js"></script>
- <script class="javascript" src="./Scripts/shBrushDelphi.js"></script>
- <script class="javascript" src="./Scripts/shBrushPython.js"></script>
- <script class="javascript" src="./Scripts/shBrushRuby.js"></script>
- <script class="javascript" src="./Scripts/shBrushCss.js"></script>
- <script class="javascript" src="./Scripts/shBrushCpp.js"></script>
- <script class="javascript">
- dp.SyntaxHighlighter.ClipboardSwf = 'Scripts/clipboard.swf';
- dp.SyntaxHighlighter.HighlightAll('code');
- </script>
- </code>
ซึ่งส่วนนี้ให้เอาไว้ก่อน Tag </body>
จากนั้นมาดูในส่วนของ Code กันบ้างดีกว่าว่าเราจะใส่อย่างไร เช่น- <pre name="code" class="php">
- /***********************************
- ** Multiline block comments
- **********************************/
- <html>
- <body>
- ....เนื้อหาต่างๆจ้า...
- </body>
- </html>
- </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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
