『教學』如何美化部落格上的Code排版?推薦使用highlight.js高光程式碼!WordPress、Blog、Web都可用~
Syntax highlighting for the Web、方便的代碼高亮框架


『教學』如何美化部落格上的Code呢?推薦使用highlight.js高光程式碼!Wordpress、Blog、Web都可用
討厭自己在排版程式碼,而且白通通的十分無趣,或者是要慢慢的調整樣式!這邊分享一個非常容易上手的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樣式文件,只要改OOO部分,換成自己想要呈現Code的樣式囉!->CSS Style樣式選擇列表

<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/OOO.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樣式修改卻沒反應