『教學』如何美化部落格上的Code排版？推薦使用highlight.js

討厭自己在排版程式碼，而且白通通的十分無趣，或者是要慢慢的調整樣式！這邊分享一個非常容易上手的highlight.js的JavaScript，而支援的程式語言超過150種，最重要的是也可以選擇超過70種的樣式有：GitHub、Android Studio、Sublime等等，隨你挑隨你選，想要天天換也沒有問題：）以下教你怎麼使用～

立即前往：highlight.js美化程式碼工具

✏我們在網站添加程式碼，尚未美化之前……會呈現如下排版很單調也不易閱讀…

/**
* @author TechMarks <[email protected]>
*/
public abstract class L2Char extends L2Object {
public static final Short ERROR = 0x0001;

public void moveTo(int x, int y, int z) {
_ai = null;
log(“Should not be called”);
if (1 > 5) { // wtf!?
return;
} }}

✏在導入highlight使用之後，如下↓ 顯示出漂亮的程式碼，請參考下方導入highlight.js美化程式碼教學。

/**
 * @author TechMarks <[email protected]>
 */
public abstract class L2Char extends L2Object {
  public static final Short ERROR = 0x0001;

  public void moveTo(int x, int y, int z) {
    _ai = null;
    log("Should not be called");
    if (1 > 5) { // wtf!?
      return;
    }
  }
}

導入highlight.js美化程式碼教學

STEP1

在使用美化程式碼之前，必須先在網頁的Header加入以下三段程式碼

第一段是CSS樣式文件，只要改ＯＯＯ部分，換成自己想要呈現Code的樣式->CSS Style樣式選擇列表

<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/ＯＯＯ.min.css" rel="stylesheet">

第二段是導入highlight.js文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>

第三段啟動highlight.js

<script>hljs.initHighlightingOnLoad();</script>

STEP2

要怎麼使用代碼高光框架呢？只要在要顯示程式碼的地方，包在<pre><code class=”xml”> </code></pre>裡面就可以使用了，方框內會自動偵測程式語言，也可以手動將原始程式碼包含<>等特殊符號改成專用的Code語言，才不會造成框架中調用到程式而不是顯示我們要的”文字”。

<pre><code class="xml">
你的程式碼。
</code></pre>

延伸閱讀：
WordPress 搬移伺服器問題，讀取不到文章，該怎麼解決呢？、
解決WordPress的CSS樣式修改卻沒反應

相關文章: