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

Use Syntax Highlighter on Blogger

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

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

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

ก่อนใช้งานเราจะต้องเพิ่ม Code ใน Template แบบนี้
?
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
27
28
<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

on
ป้ายกำกับ: ,
ตำแหน่ง: Thailand

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)