I'M JUMBO: Blogger

วันศุกร์ที่ 30 ตุลาคม พ.ศ. 2563

[Blogger] ลองเปลี่ยนมาใช้ highlight.js ทำ Syntax Highlight Code

เนื่องจากครั้งก่อนใช้งาน Syntax Highlighter ซึ้งเป็น Version 3 และไม่มีภาษาใหม่ ๆ ให้ใช้งานตอนนี้ก็เลยต้องหาตัวใหม่มาใช้งาน
เจอ highlight.js น่าสดใจมากและคนใช้เยอะมาก เลยจับมาลงสักหน่อย

และเหมือนเดิมเราต้องไปทำการเพิ่ม Code ที่ Template ก่อนเอา Code มาจาก https://highlightjs.org/usage/
มองหาส่วนของ CDN Hosted เราจะใช้ของ Cloudflare https://cdnjs.com/libraries/highlight.js
เลือกภาษาและ Theme ได้ที่ https://highlightjs.org/static/demo/


<!-- highlight.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/default.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"></script>
      
<!-- and it's easy to individually load additional languages -->
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/languages/bash.min.js"></script>
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/languages/css.min.js"></script>
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/languages/javascript.min.js"></script>
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/languages/sql.min.js"></script>
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/languages/typescript.min.js"></script>
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/languages/xml.min.js"></script>

การใช้งานก็ใส่ Code ไปในบนความของเรา


<pre><code class="bash"> ... </code></pre>

วันเสาร์ที่ 22 ธันวาคม พ.ศ. 2561

Use Syntax Highlighter on Blogger

การใส่โค้ดลงไปใน Blogger นั้นไม่สวยงามเราจำเป็นต้องใช้ Syntax Highlighter
เพื่อช่วยให้ Code นั้นดูง่ายมีการแสดงเลขบรรทัดชัดเจนสวยงาน

รายการภาษาที่รองรับใน Version 3 ที่กำลังใช้งานอยู่ใน Blog นี้
_/\_ ขอบคุณ Cloudflare ดูไฟล์อื่นๆ หากต้องใช้งานได้ที่นี้

วิธีการใช้งาน

ก่อนใช้งานเราจะต้องเพิ่ม Code ใน Template แบบนี้

<head>

  <link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.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>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreMidnight.css" rel="stylesheet" type="text/css"></link>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeMidnight.css" rel="stylesheet" type="text/css"></link>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.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/shBrushSql.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/shBrushCss.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 language="javascript"> 
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
  </script>

  <style>
    .syntaxhighlighter { 
      overflow-y: hidden !important; 
    }
  </style>

</head>

เวลาต้องการใช้งาน ก็แทรก <pre class="brush: {language}"> และ </pre> ปิดท้าย

 <pre class="brush:html;highlight:[2]" title="bash/shell">
  ########## YOUR CODE ##########
 </pre>

Syntax Highlighter 4