รองรับการแสดงผล Source Code ในเว็บเพจ

เคยมั้ยที่เวลาอ่านโค็ดบนเว็บแล้วมันอ่านยากจัง?

วันนี้เรามาเรียนรู้วิธีการแสดงผลโค็ดบนหน้าเว็บให้อ่านได้ง่ายสบายตากันดีกว่าครับ ซึ่งการทำแบบนี้เราเรียกว่าการทำ Syntax highlighting นั่นเองครับโดยการ highlighting นั่นก็มีด้วยกันอยู่หลายภาษานะครับ เช่น C/C++, C#, VB, HTML, PHP หรือ ASP.NET เองก็ตาม แ่เราจะโชคดีหน่อยครับที่มีคนใจดีเค้าทำ CSS ให้เราเรียบร้อยแล้วเราแค่เรียกใช้งานมันเท่านั่นเองครับ ง่ายมากๆ โดยคนที่สร้างมันได้อธิบายหลักการทำงานไว้ที่ http://alexgorbatchev.com/SyntaxHighlighter/

โดยหลักการคร่าวๆ ก็ไม่ได้ยากอะไรครับเพียงแค่เราทำการ link CSS ที่เค้าได้เขียนไว้แล้วใน <head> และ </head> จากนั่นก็เรียกการใช้งานโดยการใช้ <pre></pre> ครอบส่วนที่เราต้องการแสดงเป็นโค็ดเพียงเท่านั่นเองครับ เรามาลองดูที่ละขั้นตอนกันเลยดีกว่าครับ

เราต้องทำการเขียน HTML โค็ดประมาณนี้ก่อนนะครับ โดยหลักๆ คือการเรียกใช้งาน CSS เท่านั่นครับ โดยยการเพิ่มเข้าไปใสส่วน <head></head> นั่นเองครับ

<html>
    <head>
  <title>Test CSS Style For Coding</title>
  <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
  <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shThemeDefault.js' type='text/javascript'></script>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
  <script language='javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
   SyntaxHighlighter.all();
  </script>
    </head>
    <body>
  Here is coding style.
    </body>
 </html>

มาถึงส่วนใน <body></body> กันบ้างนะครับ ในส่วนนี้เราจะทำการเพิ่มการแสดงผลเป็นแบบ HTML กันนะครับโดยการใส่โค็ดที่เราต้องการแสดงไว้ใน <pre></pre> นะครับ แต่ในส่วนนี้มีขั้นตอนเพิ่มนิกหน่อยครับ คือเราจะต้องทำการ Convert HTML โค็ดให้เป็นในรูปบบที่จะแสดงผลได้ก่อนครับ โดยเครื่องมือที่จะใช้ในการ Convert ดูได้ตามนี้เลยครับ http://www.string-functions.com/htmlencode.aspx จากนั่นเราก็แค่ใส่เข้าไปใน <pre></pre> เท่านั่นครับ

<body>
     Here is coding style.
          <pre class="brush:html">
                         &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;My Great Web page&lt;/title&gt;
      &lt;script type='text/javascript' src='http://connect.facebook.net/en_US/all.js#xfbml=1'&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;fb-like&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;fb-login-button&quot;&gt;Login with Facebook&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
          </pre>
</body>

ถ้าเราทำถูกต้องทุกอย่างแล้วนะครับ ผลลัพธ์ควรจะเป็นเช่นนี้ครับ

แล้วถ้าเป็นภาษาอื่นที่ไม่ใช่ HTML ละจะทำยังไง ก็ง่ายๆ ครับแค่เราเปลี่ยน brush ใน <pre> แค่นั่นเองครับ เช่ย ถ้าเป็น C# ก็จะได้เป็น <pre class="brush:C#"> เราสามารถดูได้ว่าตัว CSS นี้รองรับภาษาไหนบ้างได้จาก http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ นะครับ

แล้วถ้าเราต้องการเปลี่ยน Theme ละเราจะทำยังไงก็ไม่ยากครับตัว CSS ที่พี่เบ้มเค้าเขียนนี้เมพๆ มากๆ สามารถรองรับการเปลี่ยน Theme ไว้อยู่แล้วครับ หลักการง่ายๆ เราเพียงแค่เปลี่ยนบรรท้ดที่เป็น shThemeDefault.css ให้เป็น Theme ที่เราต้องการครับ โดย Theme จะมีให้เลือกกันทั้งสิ้น 7 แบบครับ ดังนี้