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

เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee
code style google syntaxhighlighter css

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



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

 

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

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

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

หลังจากนั้น Script อีกอันหนึ่งที่เราจะต้องเพิ่มเข้าไปเพื่อดึง script มาใช้นั้นก็คือ
view plaincopy to clipboardprint?
  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 กันบ้างดีกว่าว่าเราจะใส่อย่างไร เช่น
view plaincopy to clipboardprint?
  2. <pre name="code" class="php">
  3. /***********************************
  4. ** Multiline block comments
  5. **********************************/
  6. <html>
  7. <body>
  8. ....เนื้อหาต่างๆจ้า...
  9. </body>
  10. </html>
  11. </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>



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





Tags:: code google syntaxhighlighter css style







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ