Friday, December 19, 2014

แสดง Code ใน Blog ให้สวยงามด้วย Syntax Highlighter 

/***********************************
 ** Multiline block comments
 **********************************/
 
$stringWithUrl = "http://alexgorbatchev.com";
$stringWithUrl = 'hello world';
 
ob_start("parseOutputBuffer");      // Start Code Buffering
session_start();
 
function parseOutputBuffer($buf) {
    global $portal_small_code, $portal_gzcompress;
    global $PHP_SELF, $HTTP_ACCEPT_ENCODING;
 
    // cleaning out the code.
    if($portal_small_code && !$portal_gzcompress) {
        $buf = str_replace("    ", "", $buf);
        $buf = str_replace("\n", "", $buf);
        $buf = str_replace(chr(13), "", $buf);
    }
}
  • ก่อนหน้านี้ก็ใช้แต่ Quote ของ Blogger เค้าอย่างเดียวเลย ไม่ค่อยจะสนใจทำให้มันสวยงาม ทั้ง command line ทั้ง code programing ต่างๆ 
  • วันนี้เรามาแสดงโค้ดใน blogger ให้สวยงามกันซะทีเริ่มตั้งแต่โพสนี้แล้วกัน
ขั้นแรกเราต้องแก้ไข template blogger เราก่อน
  •  Log in เข้า dashboard blogger แล้วเมนูด้านซ้ายคลิกที่ template
  • จากนั้นมันจะแสดง template ที่เราใช้งาน ณ ปัจจุบันอยู่ให้เราคลิกที่ Edit HTML 

  • ทำการเพิ่มโค้ดตามนี้เข้าไปในโค้ด template ของเราซะหน่อย โดยให้โค้ดเราอยู่ก่อน close tag </head>
<!-- SyntaxHighlighter START -->
<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
 
<script language='javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>
<!-- SyntaxHighlighter END -->
  • จากนั้นคลิกปุ่ม Save template 
  • เพิ่มเติมเราสามารถเปลี่ยนธีมการแสดงโค้ดได้โดยเปลี่ยนค่าบรรทัดนี้ 
  • http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css ค่า shThemeDefault.css เปลี่ยนเป็นค่าอื่นจากเว็บนี้ได้เลย
  •  http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/default.html 
  • เมื่อเปลี่ยนค่าแล้วอย่าลืม Save template ด้วยนะครับ 
การเขียนโพสให้แสดงโค้ดของเราแบบ SyntaxHighlighter 
  • ใช้โหมด HTML นะครับจะง่ายกว่า โดยใช้ 
  • <pre class="brush: X">... code progarming ...</pre>
  • โดยที่ค่า X คือ ภาษาของโค้ดเรา เช่น js, java, php หรือ bash เป็นต้น ดูตัวอย่างด้านล่างน่าจะเข้าใจ
  • หรือถ้าไม่ถนัดอยากใช้โหมด Compose ผู้เขียนแนะนำให้เขียนใส่ dreamweaver หรือ html edit ที่มันแสดงหน้า design ด้วย สักตัวก่อน จึงค่อยโพสขึ้น Blogspot เพราะตอนเขียนเป็นยังไงตอนโพสด้วยโหมด Compose มันก็จะแสดงไม่น่าจะเพี้ยนนะ
  • ข้อควรจำโค้ดที่จะแสดงเป็น syntax highlight เรื่อง เครื่องหมาย น้อยกว่า < ต้องเปลี่ยนเป็น &lt; และ เครื่องหมายมากกว่า > ต้องเปลี่ยนเป็น &gt; มาดูตัวอย่างเลยโพสแบบนี้ เราจะแสดงโค้ด php นะครับ ให้เรานำโค้ดด้านล่างนี้ไปวางในโหมด HTML แล้ว Save ครับพี่น้อง
  • ซึ่งเราสามารถใช้ web site ในการช่วยแปลงเครื่องหมายพิเศษของ HTML เหล่านี้ได้
  • เช่นเว็บเหล่านี้ เป็นต้น
  • http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php
  • http://www.web2generators.com/html/entities
  • http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx
แทรกโค้ด PHP ผ่าน HTML editor mode
<pre class="brush: php">
&lt;?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
echo "Connected successfully";
?&gt;
</pre>
ผลลัพธ์ (สังเกตุ &lt; จะกลายเป็น < และ &gt; จะกลายเป็น >)
<pre class="brush: php">
<?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
echo "Connected successfully";
?>
</pre>
แทรกบรรทัดคำสั่ง (bash shell)
<pre class="brush: bash">
sudo service apache2 restart
sudo /etc/init.d/apache2 restart
</pre>
เพิ่มเติม 
  • เราสามารถลบ shBrushX.js ในภาษาที่เราไม่ได้ใช้ออกจากโค้ด template blogger เราได้นะเพื่อความรวดเร็วในการโหลด blog เรา
เครดิต
  • http://webdevformula.blogspot.com/2013/11/blog-syntax-highlighter.html
  • http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/default.html
  • http://web264.blogspot.com/2013/07/syntaxhighlighter-code-blogger.html?spref=bl
  • http://www.w3schools.com/tags/ref_urlencode.asp
  • http://stackoverflow.com/questions/10335463/how-to-setup-syntax-highlighter-on-blogger
เขียนโดย ที่

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts