CKEditor 5 教學 (六)，在你的文章中顯示程式碼區塊 (Code Block)

CKEditor 5 支援程式碼區塊 (Code Block)，讓你可以在文章中呈現各種程式語言的區塊。

本篇文章會敘述如何安裝程式碼區塊的套件，還有在文章中使用 Prism.js 高亮你的程式碼區塊。

這篇文章會簡單敘述安裝套件的過程，並特別說明如何增加程式語法種類。

# Python 程式碼區塊
def say_hello_world():
	print('Hello World!')

say_hello_world()

安裝程式碼區塊套件

CKEditor 5 預設並沒有程式碼區塊的功能，因此我們需要另外安裝套件。

安裝套件的方法可以參考之前的文章，CKEditor 5 教學（二），客製化編輯器的功能列。

首先在 ckeditor5-build-classic 資料夾中使用 npm 安裝程式碼區塊。

npm install --save @ckeditor/ckeditor5-code-block

安裝好之後，需要在 ckeditor.js 中設定剛剛安裝好的套件。首先 import 剛剛安裝的套件。

import CodeBlock from "@ckeditor/ckeditor5-code-block/src/codeblock";

設定 npm run build 時，會載入的套件。

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
	CodeBlock,
];

設定編輯器上方功能列的顯示。

ClassicEditor.defaultConfig = {
	// 編輯器上方功能列的顯示與排列
	toolbar: {
		items: [
			"codeBlock",
		]
	},
	
	// 設定支援哪幾種語言
	codeBlock: {
		languages: [
			{ language: 'plaintext', label: 'Plain text' },
			{ language: 'c', label: 'C' },
			{ language: 'cs', label: 'C#' },
			{ language: 'cpp', label: 'C++' },
			{ language: 'css', label: 'CSS' },
			{ language: 'diff', label: 'Diff' },
			{ language: 'html', label: 'HTML' },
			{ language: 'java', label: 'Java' },
			{ language: 'javascript', label: 'JavaScript' },
			{ language: 'php', label: 'PHP' },
			{ language: 'python', label: 'Python' },
			{ language: 'ruby', label: 'Ruby' },
			{ language: 'typescript', label: 'TypeScript' },
			{ language: 'xml', label: 'XML' }
		],
	},
}

接下來在 ckeditor5-build-classic 資料夾底下使用 npm 的 build 產出編輯器的 JS 檔案，並在網頁編輯頁面中引入。

npm run build

重新整理網頁，應該就能在編輯器中使用程式碼區塊了。

高亮 (Highlight) 你的程式碼區塊

雖然已經可以編輯程式碼區塊。但是你會發現不管選用哪一種語言，似乎都沒有效果，只有灰底黑字。

CKEditor 官方的 CSS 並不支援程式碼高亮，跟之前的影片嵌入一樣，還需要第三方套件協助才可以。

官方文件中提到可以使用 Prism.js 或是 highlight.js 來高亮你的程式碼區塊
本篇文章我們會使用 Prism.js。

首先我們先到 Prism.js 的官方網站，點擊右上方的 Download。

在這裡可以選擇你想要支援的程式語法與高亮主題，甚至還有外掛可供使用。選好你想要支援語法與主題之後，就可以至下拉至下面下載 JS 與 CSS 的檔案。

接下來只要在顯示文章的頁面，載入 Prism.js 的 JS 與 CSS 檔案。

<!-- CSS 檔案 -->
<link rel="stylesheet" href="檔案路徑/prism.css" type="text/css">

<!-- JS 檔案 -->
<script src="檔案路徑/prism.js"></script>

重新整理頁面後，原本只有灰底黑字的程式碼區塊，就會充滿高亮後的色彩了。

如何新增支援的程式語法

可能你想支援的程式碼語法是上面文章沒有提到的，這時候你可以自己新增想要的程式語法。

如果我們在顯示文章的頁面開啟瀏覽器的開發人員工具，你會發現程式碼的標籤是長這樣的。

<pre>
	<code class="language-javascript">window.alert( 'Hello world!' )</code>
</pre>

Prism.js 就是依據 code 標籤中的 class 屬性，決定要套用哪種語法的高亮模式
而 language-javascript 就是由 ckeditor.js 中所設定。

// language 設定在標籤中顯示的 class name
// label 則是設定顯示在編輯器上程式碼選單的文字
{ language: 'javascript', label: 'JavaScript' },

因此如果想要正確的套用 Prism.js 的高亮功能，language 就必須設定正確。

Prism.js 的官網中有列出各種支援的 language，假設要支援 Kotlin，就需要加入這一行在 ckeditor.js 中。

{ language: 'kotlin', label: 'Kotlin' },