วิธีการทำ Code Snippet สำหรับ Blogger :: Update Jul 23 2018

วิธีการทำ Code Snippet ด้วย SyntaxHighlighter
เขียนแบบลวก ๆ รีบเขียนเพราะต้องไปธุระ
ให้ไปที่ Themes แล้วคลิก Edit HTML แล้วค้นหาแท็ก </head> สามารถกด Ctrl+F ได้

?

Source Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css" rel="stylesheet" type="text/css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSql.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushVb.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPerl.js" type="text/javascript"></script> <script type="text/javascript">     SyntaxHighlighter.config.bloggerMode = true;     SyntaxHighlighter.autoloader(     'c-sharp csharp https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.js',     'javascript jscript js https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js',     'xml xhtml xslt html xhtml https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js',  'py python https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.js'     );     SyntaxHighlighter.all(); </script>

เวลาใช้งานก็ให้สร้าง Post ใหม่แล้วใช้ Source Code ตามนี้

?

Source Code

1	<pre class="brush: py" title="Test Python Code Block">print("Hello")</pre>

โดยที่สามารถเปลี่ยนสี และภาษาได้ โดยสามารถเข้าไปดูรายละเอียดได้ ที่นี่
ด้านล่างเป็นตัวอย่าง Code Snippet Output ที่ทดลองทำ

?

Test Python Code Block

1	print("Hello")

?

Test JavaScript Code Block

1 2 3 4 5 6 7 8 9

/**  * SyntaxHighlighter  */ function foo() {     if (counter <= 10)         return;     // it works! }