Code Mirror 介紹與用法
Code Mirror 由 JS 寫的一個插件,功能非常強大,用來實現網頁端代碼編輯器非常方便。具有代碼編輯器,支持語法高亮、自動縮進、智能提示等功能。
(官網) Code Mirror特色
開箱即用支持 100 多種語言
一個強大的、可組合的語言模式系統
自動完成 (XML)
代碼折疊
可配置的鍵綁定
Vim、Emacs 和 Sublime 文本綁定
搜索和替換界面
括號和標籤匹配
支持拆分視圖
短絨集成
混合字體大小和样式
各種主題
能夠調整大小以適應內容
內聯和塊小部件
可編程間距
將文本範圍設為樣式、唯讀或原子
雙向文本支持
許多其他方法和插件...
使用:先將套件引入,可選擇用 npm 安裝套件方法或 cdn 方式引用
在 myTextArea 後方的設定,是對其樣式的設定。官網提供不少選項!
主題樣式切換
CodeMirror 有許多主題選項可以做選擇,選看看可直接在網頁預覽效果。
可以在 theme 做設定,實作先加上 Select a theme 的選項。
設定不同主題,這邊挑選的分別是 (1)bespin (2)rubyblue (3)xq-light
在 css 引用部分要將各自檔案分別引入
搭配 jQuery 做選擇
調整字體與大小
使用 .CodeMirror()
可以編輯全部用到的 editor。如果有多個,想分別設定字體與大小,可以在前面多指定 class。
複製/清除編輯器裡程式碼
清除的部分比較容易,只需要用 .setValue('')
即可清空。
複製的部分,需要先保存,用配搭的 getValue() 取值。
本篇內容為專案實作中的筆記。
⌨ Time to code!