/***********************************
** 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 ด้วยนะครับ
- ใช้โหมด HTML นะครับจะง่ายกว่า โดยใช้
- <pre class="brush: X">... code progarming ...</pre>
- โดยที่ค่า X คือ ภาษาของโค้ดเรา เช่น js, java, php หรือ bash เป็นต้น ดูตัวอย่างด้านล่างน่าจะเข้าใจ
- หรือถ้าไม่ถนัดอยากใช้โหมด Compose ผู้เขียนแนะนำให้เขียนใส่ dreamweaver หรือ html edit ที่มันแสดงหน้า design ด้วย สักตัวก่อน จึงค่อยโพสขึ้น Blogspot เพราะตอนเขียนเป็นยังไงตอนโพสด้วยโหมด Compose มันก็จะแสดงไม่น่าจะเพี้ยนนะ
- ข้อควรจำโค้ดที่จะแสดงเป็น syntax highlight เรื่อง เครื่องหมาย น้อยกว่า < ต้องเปลี่ยนเป็น < และ เครื่องหมายมากกว่า > ต้องเปลี่ยนเป็น > มาดูตัวอย่างเลยโพสแบบนี้ เราจะแสดงโค้ด 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">
<?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>
ผลลัพธ์ (สังเกตุ < จะกลายเป็น < และ > จะกลายเป็น >)
<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
.webp)
