網頁程式碼工具 - 格式化(HighlightJS)、上色(DirtyMarkup)、Escape編碼、JS壓縮

將程式碼格式化並上色，方便在網站上閱讀

以下以Blogger為例

上色

推薦使用highlight.JS，支援格式多，配色主題也相當多

官方網站: Highlight JS
主題挑選: HighlightJS Demo

因為需要使用到jquery，若網頁已經有載入過jquery，就不需要重複載入了，若無，則在
</head>前加入

<script src='https://code.jquery.com/jquery-3.3.1.min.js'/>

將以下script 貼在</body>前，讓整體網頁都載入後再來搜尋的block處理上色

<script type='text/javascript'>
      //<![CDATA[
          if ($(".post-body code").length) {
              $("head").append("<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/obsidian.min.css'>");
              $.getScript("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js", function() {
                  $("code").each(function(a, b) {
                      hljs.highlightBlock(b)
                  })
              })
          };
      //]]>
</script>

• 主題由載入的CSS控制，更改obsidian.min.css 名稱即可選擇對應主題
• 若非Blogger，".post-body" 改為文章區塊的 class 或 id。

使用方式

將要展示的程式碼先格式化、進行 Escape 編碼後，再將內容前後用<pre><code></code></pre>包起來就可以了

可用這個方式限制code block高度
<code style="max-height: 500px;">

格式化

推薦使用 DirtyMarkup
DirtyMarkup 是一個程式碼排版小工具，支援 HTML、JavaScript 與 CSS 這些網頁程式碼。

Escape 編碼

若使用某些字元例如 <、>，會被當成 HTML 標籤的一部份來解析，導致部分程式碼無法顯示。

因此展示用的程式碼務必先經過 Escape 編碼，可利用這個線上工具「Replace special characters with HTML Entities」來處理，就不會有問題了。

JS壓縮工具

Google出的Closure Compiler線上版，簡單好用
 Closure Compiler