วิธีใส่ Syntax Highlighter ใน Blogger

วิธีที่ 1 ใช้ highlight.js

1. ไปที่ Blogger Dashboard > Theme > Edit HTML หาแท็ก </body>

2. วางโค้ดต่อไปนี้เหนือแท็ก </body>

<link defer='' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css' rel='stylesheet'/>
<script defer='' src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'></script>

<script>
  window.addEventListener('DOMContentLoaded', function() {
    hljs.initHighlightingOnLoad();
  });
</script>

3. เวลาวางโค้ด ใช้รูปแบบนี้

<pre><code class='js'>
  Your Code Here
</code></pre>

class ภาษาที่รองรับดูได้จาก 

https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md

http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html
Cr: https://www.buildinbit.com/2018/06/syntax-highlighter-blogger.html

วิธีที่ 2 ใช้ SyntaxHighlighter by Alex Gorbatchev

1. ไปที่ Blogger Dashboard > Theme > Edit HTML หาแท็ก </body>

2. วางโค้ดต่อไปนี้เหนือแท็ก </body>

<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/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/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/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/shBrushPython.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/shBrushXml.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'></script>
<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>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>  


<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>

3. เวลาวางโค้ด ใช้รูปแบบนี้

<pre class="brush: html">
  Your Code Here
</pre>

แต่เวลาเอาโค้ด html มาวาง ต้องทำการ encode ก่อน  เช่นพวก < จะถูกแปลงเป็น &lt; แปลงได้ที่เว็บ https://mothereff.in/html-entities

วิธีที่ 3 ทำ CSS เอง

ทำ แบบเรียบๆ

pre {
     padding:10px 10px 10px 10px;
     margin:.5em 0;
     white-space:pre;
     word-wrap:break-word;
     overflow:auto;
     background-color:#f2f2f2;
     position:relative;
     box-shadow:0 0 0 1px #ddd;
     border-radius:5px;
}

 ทำ Blockquote แบบเส้นสมุด

blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5bZUvHoij9Bq6W7Um3JDe2IG_znIYXjjkJ3cxVlu-ynOEOnD2LMz3SfZ7oOafKU8HqRw9-qqtuZiXHbrsfteABXCI1TG_1sQbROil1UbPp3poCfQ_ZxF6NGCSt5o7yGRfC6QWyc4XTRY/s1600/note.png) repeat-y scroll 0 0 transparent;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-moz-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-ms-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-o-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
margin: 10px 13px;
padding: 2px 45px 14px;
line-height: 1.65em;
font-family: monospace;
font-size:14px;
overflow-x: auto;
}

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email