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

2021_07_14_16_53_57_60eea625be640.jpg
Prism.js 可以讓你的程式碼區塊充滿色彩,而且檔案非常輕盈

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

2021_07_14_16_54_11_60eea63335aff.jpg
選擇好就可以下載 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' },
WRITEN BY
sharkHead
後端工程師,稍微擅長 Laravel、Python 與 Google 搜尋
對於前端有興趣,無奈沒什麼慧根
0 則留言