CodeInput套件-(搭配PrismJS)

CodeMirror網頁端代碼編輯器平替

6 min readNov 1, 2024

📋 目錄

前景提要&CodeInput介紹
PrismJS介紹
自定義新高亮語言(Nifi Expression)
結合CodeMirror實作

前景提要&CodeInput介紹

原本的專案中使用了 CodeMirror 進行程式碼編輯，但發現其包體積較大，因此決定調研其他較輕量的替代方案。後來找到了 WebCoder49/code-input，它符合需求。然而，由於需要高亮的語言是冷門的 NiFi Expression，必須修改 PrismJS 套件來自定義語法高亮功能，一步步實作並記錄過程重點。

WebCoder49/code-input 詳細介紹文章： Creating an Editable Textarea That Supports Syntax-Highlighted Code

WebCoder49/code-input 是一個輕量級的程式碼輸入套件，專注於簡單的語法高亮(需搭配Prism.js或Highlight.js)和基本的編輯功能，其套件包大小相對輕巧，適合需要快速加載和高效運行的應用場景。相比之下，Code Mirror 雖然功能強大，但套件體積較大，包含更多進階功能如自動完成和多游標編輯，適合大型項目。(筆者有整理一篇文章可以參考：🚪CodeMirror網頁端代碼編輯器) WebCoder49/code-input 更適合那些只需基本語法高亮且對套件包大小敏感的應用，提供更快速的頁面加載速度。

PrismJS介紹

Prism.js 是一個輕量級、高度可擴展的語法高亮庫，常用於前端開發者在網頁中展示代碼時進行高亮處理。

1. 語法高亮
Prism.js 支援多種語言的語法高亮，例如 HTML、CSS、JavaScript、Python、Go 等。

2. 輕量且性能優化
Prism.js 設計輕量，並且通過延遲加載的方式確保網頁性能不受影響。避免不必要的資源消耗。

3. 易於擴展
內置了多種插件，例如自動化語法高亮、代碼行數顯示、代碼折疊、代碼拷貝按鈕等。可自定義語法解析器來支持特定樣式。

💡插件推薦：
Line Numbers：添加行號顯示。插件大約 1-2 KB
Show Invisibles：顯示隱藏的字符，如空格、Tab 等。 1-2 KB 左右。
Line Highlight：突出顯示指定的代碼行。 1-2 KB 左右。

4. 兼容性強
Prism.js 支援現代的瀏覽器，包括 Chrome、Firefox、Safari 和 Edge。它沒有依賴像 jQuery 這樣的第三方庫，所以可以無縫集成到各種框架或純 HTML 頁面中。

只使用 Prism.js 的核心、SQL 語言支持、行號插件，以及 code-input 及其一些常用插件，整體文件大小通常在 60–100 KB 之間。(⚖比較：CodeMirror 套件 280 KB)

自定義新高亮語言(Nifi Expression)

PrismJS 定義自訂的語言高亮，可以參考 PrismJS 官方提供的文檔。

PrismJS 官方語言定義文檔：這份文檔詳細介紹了如何自訂語言高亮，並解釋了如何使用 Prism 的 languages API 來定義語法。
語言定義的結構：需要創建一個包含語法規則的 JavaScript 文件，該文件會描述你想要解析和高亮的語法元素。規則可以用正則表達式來匹配關鍵字、標籤、字符串等語法結構。
參考現有的語言高亮：官方的語言高亮定義可以作為很好的範例。你可以檢視 PrismJS 的 GitHub 代碼庫中的 components 文件夾，了解已經實現的各種語言高亮規則，這些可以幫助你設計自訂語言。

實作上參考 NiFi 官方文件提供的文件： NiFi Expression Language Guide

整理並分類了prism-nifi.js如下：

有關分類名稱(像是 function、builtin、logical-operator ...)，PrismJS並沒有給個統一命名或可供參考的表。筆者的做法是參考其他檔案像是prism-javascript.js或prism-python.js，參考他們的分類來設定nifi expression的分類。

定義顏色設定可以用 .token.xxxx {} 去做設定。

加完語言以及顏色設定，還需要在 components.json 檔案加入新語言。

結合CodeMirror實作

這邊的高亮規則簡易化，只有寫4種高亮。

codeInput.registerTemplate(“demo”, codeInput.templates.prism(Prism, []));可以註冊模板，後續有要使用可以直接用"demo"

<code-input required id="main-demo" class="line-numbers" style="width: 90%;" lang="nifi" placeholder="Write some NiFi Expression!" template="demo">${attribute.toLower()} ifElse(${attribute}, "trim(${value})", replace(${attribute.toLower()}, "abc", "123"))</code-input>

使用<code-input>tag標籤

⛄實作結果：

Prism 使用上彈性很高，可以快速設定高亮的顏色及對應語言。CodeInput 用重疊並隱藏 textarea，<pre>動態顯示 prism 高亮的內容。