I'M JUMBO: Syntax Highllighter

วันเสาร์ที่ 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> ปิดท้าย

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

Syntax Highlighter 4