CodeMirror

實現網頁端代碼編輯器

Jacy Chu
May 30, 2022

📋 目錄

  1. Code Mirror 介紹與用法
  2. 主題樣式切換
  3. 第三個標題
  4. 第四個標題

Code Mirror 介紹與用法

Code Mirror 由 JS 寫的一個插件,功能非常強大,用來實現網頁端代碼編輯器非常方便。具有代碼編輯器,支持語法高亮、自動縮進、智能提示等功能。

(官網) Code Mirror特色

開箱即用支持 100 多種語言
一個強大的、可組合的語言模式系統
自動完成 (XML)
代碼折疊
可配置的鍵綁定
Vim、Emacs 和 Sublime 文本綁定
搜索和替換界面
括號和標籤匹配
支持拆分視圖
短絨集成
混合字體大小和样式
各種主題
能夠調整大小以適應內容
內聯和塊小部件
可編程間距
將文本範圍設為樣式、唯讀或原子
雙向文本支持
許多其他方法和插件...

使用:先將套件引入,可選擇用 npm 安裝套件方法或 cdn 方式引用

在 myTextArea 後方的設定,是對其樣式的設定。官網提供不少選項!

主題樣式切換

CodeMirror 有許多主題選項可以做選擇,選看看可直接在網頁預覽效果。

theme 選項

可以在 theme 做設定,實作先加上 Select a theme 的選項。

設定不同主題,這邊挑選的分別是 (1)bespin (2)rubyblue (3)xq-light

在 css 引用部分要將各自檔案分別引入

搭配 jQuery 做選擇

調整字體與大小

使用 .CodeMirror() 可以編輯全部用到的 editor。如果有多個,想分別設定字體與大小,可以在前面多指定 class。

複製/清除編輯器裡程式碼

清除的部分比較容易,只需要用 .setValue('') 即可清空。

複製的部分,需要先保存,用配搭的 getValue() 取值。

本篇內容為專案實作中的筆記。

⌨ Time to code!

--

--