WEB 開發

在 網頁/部落格 嵌入程式碼

Programmer/Designer 時常需分享、教學程式碼,
若不使用現有文章平台 (e.g., HackMD),
就得面臨 語法高亮 (syntax highlighting) 的問題。
 
從我 blog 第一篇文到現在,
皆陸續有讀者詢問:「我的程式碼是如何呈現的」🤔。
 
那麼,這次就來公開我的兩個獨門插件!
並討論 — — 如何分享美美的程式碼吧 😁。
 


 

Online Syntax Highlighting

第一種方式是透過 ToHTMLhilitequickhighlighter …等服務,
將程式碼 線上轉換成 HTML (CSS) 後,再自行複製貼上。
 
例如,將以下程式碼貼到 ToHTML

public class Main {
    public static void main(String[] args) {
    
        // Just a comment
        System.out.println("Hello, World!");
    }
}

// Result:
// Hello, World!

 
經轉換後,得到:

<pre style='color:#d1d1d1;background:#000000;'...

 
貼到 HTML body 中:

 
 
優點:
速度非常快 (inline style 不須額外 HTTP 請求),
且有利於不支援「外部JS」的環境。
缺點:
程式碼不易管理、修改 😵,因此沒有很推薦。
 


 

Embed

第二種方式,是使用一些 Code 平台的 嵌入 (embed) 功能,
ideoneglot.ioPastebincodepadgodbolt 等服務:
 

 
當然,有時可能發生樣式衝突,如 Github Gist 與我 😂:

 
Web 前端 (HTML, CSS, JavaScript),還能使用 CodePenJSFiddle
即時顯示、執行,相當有利於作品之 DEMO:

See the Pen Float on by JS-Zheng (@JS-Zheng) on CodePen.


 
評語:
這種方式,除了嵌入自己的頁面中,
對於程式碼的 發問、連結分享…等 也非常實用!
 
另外,可別忘了:

討論程式時,縮排 (indent) 是基本禮貌 😎!

 


 

Highlight JS

若您跟我一樣,不喜歡嵌入外部資源,並受限於其樣式,
那絕不能錯過 highlight js!
 

 
 

安裝與初始化

highlight js 支援 176 種語言 和 79 種樣式,且是 本站目前採用的方案
使用方式超簡單,在 HTML 的 <head> 加入下列代碼便大功告成 (最新版本詳見 官網)!

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/樣式名稱.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

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

(別忘了替換 樣式名稱 喔)
 
 

撰寫程式碼

接下來,便能在頁面中以 <pre><code class="xxx">標籤 撰寫程式碼,例如:

<body>
.
.
<pre><code class="java">public class Main {
    public static void main(String[] args) {

        // Just a comment
        System.out.println("Hello, World!");
    }
}

// Result:
// Hello, World!</code></pre>
.
.
.
</body>

[註]:其中,xxx 是程式語言名稱,也可以不填寫交給 highlight js 判斷。
 
highlight js 會自動找出頁面中的 <pre><code>標籤加以渲染,結果:

public class Main {
    public static void main(String[] args) {

        // Just a comment
        System.out.println("Hello, World!");
    }
}

// Result:
// Hello, World!

 
重要:

若程式碼內容含有 HTML 保留字 (e.g., 小於、大於、引號),
可別忘了使用 mothereff (支援引號)、danstoolsfreeformatter…等服務,
將特殊字元轉換成 HTML Entity 喔 😃!

 
 

行號插件 — Code-Line

highlight js 作者相當有個性,
不想支持 不喜歡的功能 — 行號 (Line Numbers)

程式碼中花俏的東西越多,越容易分散讀者的注意力。
The more fancy stuff resides around the code the more it distracts a reader from understanding it.

 
但…對不起了:

我是個超級行號控 😂

 
如果你也跟我一樣喜歡 行號 行號 (Line Numbers)
覺得沒有它,程式碼塊就好像少了什麼,那麼你可以使用 JS 插件 — Code-Line !
 
使用方式超簡單!在 <head>標籤中加入兩行即完成:

<script src="https://cdn.jsdelivr.net/npm/code-line"></script>
<script>CodeLine.initOnPageLoad()</script>

 
 

複製程式碼

Code-Line 不只有行號功能,還附加了 複製程式碼 的按鍵 (copyBtn)!
右上角也有行號功能的切換開關 (toggleBtn):
syntax-highlighting
 
然而,誠如 highlight JS 作者所言,
有些人可能覺得有趣,也有人覺得太花俏像綠豆糕。
 
別擔心!Code-Line JS 有極高的客製性,
就像排列組合一樣,你可以 關閉行號、關閉 copyBtn、關閉 toggleBtn…,
也能針對手機版網頁額外套用,只需在 初始化 Code-Line 傳入選項:

CodeLine.initOnPageLoad({
  showOnMobile: true,
  // show:false,
  toggleBtn: {show: false},
  // copyBtn: {show: false}
});

 
更多選項,詳見 官網
 
 

關於 Code-Line

Code-Line 乘著 JavaScript Prototype-Based 的特性,
使用了 prototypeproxyflyweight…等 pattern,
以 複製 與 共享 取代冗余的 DOM 操作,以求得極高的效能!
 

恩…別問我怎麼知道這麼多…
因為我就是作者啦 😂

 
一直以來都只用於自己的 網頁 與 blog,
直到前陣子朋友敲我,才決定包裝一下釋出,
如果您還喜歡的話,不妨幫我加顆 星星 喔 😆。
 


 

Prism JS

Prism JS 是另一個大名鼎鼎的語法高亮器!
官網只支援 7 種主題,想要的話能再自己改寫 😁。

 
 

基本使用

首先,得去 官網 打包下載會用到的語言、樣式,並導入頁面中:

 
如此便完成了!並不需要額外的 JS 初始化操作,
仍需注意的是,程式碼的撰寫 不同於 highlight JS:

Prism JS 不會 自動偵測語言

 
使用時得以 <pre><code class="language-xxxxx"> 的格式撰寫,例如:

<body>
.
.
<pre><code class="language-java">public class Main {
    public static void main(String[] args) {

        // Just a comment
        System.out.println("Hello, World!");
    }
}

// Result:
// Hello, World!</code></pre>
.
.
.
</body>

 
 

悲劇的行號

Prism JS 官網提供了許多的 plugins,其中,就有現成的 行號 (Line Numbers) 插件。
 
然而,這是個為人詬病的著名插件 😂,
從設計採用 avg.line-height,就註定它容易跑版的命運:

 
別擔心,iOS 也如出一轍 😆:

 
 

又見 Code-Line

如果你比較喜歡 Prism JS 的風格,又想有不跑版的行號,
Code-Line 是您的好選擇 😁!
 
也就是:

Code-Line 同時支援 highlight jsprism js !

 
需注意的是:
Code-Line 搭配 Prism 使用時,得在 Prism 執行 完成後 再加載行號,
你可以透過 Prism 的鉤子函數輕易達成:

Prism.hooks.add('complete', CodeLine.load)

 
 
完整範例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>PrismJS .feat CodeLine</title>
  <link rel="stylesheet" href="style/prism.css">
  <script src="lib/prism.js"></script>

  <script src="../dist/code-line.js"></script>

  <!-- 使用 PrismJS,需搭配其鉤子函數載入,故移除此行-->
  <!--<script>CodeLine.initOnPageLoad()</script>-->

</head>
<body>
<pre><code class="language-java">public class Main {
    public static void main(String[] args) {

        // Just a comment
        System.out.println("Hello, World!");
    }
}

// Result:
// Hello, World!</code></pre>


<script>Prism.hooks.add('complete', CodeLine.load);</script>
</body>
</html>

 
執行結果:

 


 

加碼 — 樣式選擇 (Style-Select)

highlight js 是我比較喜歡的語法高亮,
然而,如何從 79 種風格中作選擇也是個難題 🧐,
我的做法是:使用 Style-Select 讓使用者 自己選擇
(抱歉…這又是我寫的 😅)
 
不囉唆,先上 DEMO:

See the Pen Style-Select Demo by JS-Zheng (@JS-Zheng) on CodePen.


 
此插件是基於 Vue.js 而成,主要可以幫您:

  • 建立 樣式群組 (StyleGroup)
  • 生成 (多個) HTML <select> 元素,並維持狀態同步
  • 載入/切換 user 所選樣式,並儲存該條目,以在下次頁面載入時自動套用

 
當然:

你完全不需要會任何 Vue.js 😆

 
首先,得載入 Vue.js 與 Style-Select (順序很重要):

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/style-select"></script>

 
使用範例:

// 建立名為 hljs 的 樣式群組
var hljsStyles = StyleSelect.createStyleGroup('hljs');

/**
 * @param {String} 樣式 base url
 * @param {Array} 樣式名稱
 * @param {Boolean} 添加 .min 副檔名
 */
hljsStyles.addStyles('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/',
   	['agate', 'androidstudio', 'codepen-embed', 'github-gist', 'monokai-sublime' 	]
  , true);

// 設定預設樣式,避免一開始什麼都沒有,醜醜的
hljsStyles.setDefaultStyle('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/', 'agate', true);

// 以 hljs 樣式群組,建立實際的 HTML <select> 元素
// 參數:將被掛載的目標節點 
var app = hljsStyles.createHljsSelect("#my-select");

 
如果覺得有趣,再給我顆 星星 吧 🤩!
任何問題或建議,都可以留言或發 issue 給我 😃。
 
 

作者: 鄭中勝
喜愛音樂,但不知為何總在打程式 ? 期許能重新審視、整理自身所學,幫助有需要的人。

在《在 網頁/部落格 嵌入程式碼》中有 1 則留言

發表迴響