強大的代碼編輯器組件，你知道幾個？
上次介紹了一個簡單的示例，基于javascript如何從一段文本解析為一段代碼，今天我們看下一下個功能類似，但非常強大的代碼編輯器組件
CodeMirror
CodeMirror https://codemirror.net/
在Web開發中，我們經常需要在網頁上展示代碼，或者讓用戶直接在網頁上編寫代碼。為了提高用戶體驗，我們通常會使用代碼編輯器來實現代碼的高亮、自動補全等功能。而在眾多代碼編輯器中，CodeMirror無疑是一個功能強大、易用的選項。本文將帶您深入了解CodeMirror的基本用法和高級特性，讓您能夠輕松地在網頁中實現代碼編輯與高亮。
什么是CodeMirror？
CodeMirror是一個基于JavaScript的代碼編輯器，它可以在網頁中實現代碼的高亮、自動補全等功能。CodeMirror支持多種編程語言，如JavaScript、HTML、CSS、Python等，并且可以通過插件擴展支持更多的語言。CodeMirror的使用非常簡單，只需要引入相應的庫文件，然后通過簡單的配置即可實現代碼編輯與高亮。
如何使用CodeMirror？
基于webpack
- 初始化項目
npm init -y- 引入庫文件
npm i codemirror @codemirror/lang-javascript
npm i -D webpack webpack-cli webpack-dev-server
npm i -D css-loader scss scss-loader style-loader html-loader html-webpack-plugin- 創建編輯器
<div id="app">
</div>- 初始化Codemirror
const state = EditorState.create({
doc: 'console.log("hello codemirror")',
extensions: [
basicSetup,
javascript(),
// 其他擴展，包括主題、語法高亮...
],
});
const editor = new EditorView({
state,
parent: document.getElementById("editor")
})- 配置webpack
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
watch: true,
},
compress: true,
port: 9000,
hot: true, // 啟用HMR
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new webpack.HotModuleReplacementPlugin(),
],
optimization: {
minimize: false, // 關閉代碼壓縮
},
module: {
rules: [
{
test: /\.scss$/, // 正則表達式，匹配所有 .scss 文件
use: [
'style-loader', // 將 JS 字符串生成為 style 節點
'css-loader', // 將 CSS 轉化成 CommonJS 模塊
'sass-loader' // 將 Sass 編譯成 CSS，需要 npm 安裝 sass-loader 和 sass
]
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test: /\.html$/i,
loader: 'html-loader',
},
],
},
mode: 'development',
};- 啟動
{
"scripts": {
"start": "webpack serve --open",
"build": "webpack --mode=dependencies"
},
}npm startCodeMirror的高級特性
- 自定義主題
CodeMirror允許我們自定義主題，以實現個性化的代碼高亮效果。可以通過以下方式設置自定義主題：
import {EditorView} from "@codemirror/view"
let myTheme = EditorView.theme({
"&": {
color: "white",
backgroundColor: "#034"
},
".cm-content": {
caretColor: "#0e9"
},
"&.cm-focused .cm-cursor": {
borderLeftColor: "#0e9"
},
"&.cm-focused .cm-selectionBackground, ::selection": {
backgroundColor: "#074"
},
".cm-gutters": {
backgroundColor: "#045",
color: "#ddd",
border: "none"
}
}, {dark: true})- 自定義語言模式
除了內置的語言模式外，我們還可以自定義語言模式。首先需要引入相應的模式文件，然后通過以下方式設置自定義語言模式：模板是基于lezer解析,syntax.grammar，基于lezer的語法解析器，可以自定義語法規則，實現自定義語言模式，像之前那樣逐個對字符處理。
@top Program { expression* }
@skip { space | LineComment }
expression {
Identifier |
String |
Boolean |
Application { "(" expression* ")" }
}
@tokens {
Identifier { $[a-zA-Z_\-0-9]+ }
String { '"' (!["\\] | "\\" _)* '"' }
Boolean { "#t" | "#f" }
LineComment { ";" ![\n]* }
space { $[ \t\n\r]+ }
"(" ")"
}
@detectDelimimport {parser} from "./syntax.grammar"
import {LRLanguage, LanguageSupport, indentNodeProp, foldNodeProp, foldInside, delimitedIndent} from "@codemirror/language"
import {styleTags, tags as t} from "@lezer/highlight"
export const EXAMPLELanguage = LRLanguage.define({
parser: parser.configure({
props: [
indentNodeProp.add({
Application: delimitedIndent({closing: ")", align: false})
}),
foldNodeProp.add({
Application: foldInside
}),
styleTags({
Identifier: t.variableName,
Boolean: t.bool,
String: t.string,
LineComment: t.lineComment,
"( )": t.paren
})
]
}),
languageData: {
commentTokens: {line: ";"}
}
})
export function EXAMPLE() {
return new LanguageSupport(EXAMPLELanguage)
}- 語法高亮
可以根據標簽類型設置不同標簽的顏色與其他樣式，可以根據內置的tag類型定義不同的顯示風格：
import {tags} from "@lezer/highlight"
import {HighlightStyle} from "@codemirror/language"
const myHighlightStyle = HighlightStyle.define([
{tag: tags.keyword, color: "#fc6"},
{tag: tags.comment, color: "#f5d", fontStyle: "italic"}
])codemirror的擴展點很多，類似于Visual Studio Code的Web版本都可以基于該框架試下，在官網上羅列了具體的：
Accessibility
Works well with screen readers and keyboard-only users.
Mobile Support
Use the platform's native selection and editing features on phones.
Bidirectional Text
Support mixing of right-to-left and left-to-right text.
Syntax Highlighting
Color code to reflect syntactic structure.
Line Numbers
Display gutters with line numbers or other information next to the code.
Autocompletion
Provide language-specific completion hints in the editor.
Code Folding
Temporarily hide parts of the document.
Search/Replace
Editor-specific search, regexp search, and replace functionality.
Full Parsing
Detailed parse trees allow many types of language integration.
Extension Interface
Robustly implement demanding editor extensions.
Modularity
Most features are implemented on top of a generic public API.
Speed
Remains responsive even on huge documents and long lines.
Bracket Closing
Automatically insert matching brackets during typing.
Linting
Show error and warning messages in the editor.
Flexible Styling
Mix font styles and sizes, add widgets in the content.
Theming
Import or create custom visual editor styles.
Collaborative Editing
Allow multiple users to edit the same document.
Undo History
Undo and redo functionality with collab editing support.
Multiple Selections
Select and edit multiple ranges of the document at once.
Internationalization
Provide custom text to display or announce to the user.
...and more
Find a full description of the library's features in the docs.
結束語
以上就是關于CodeMirror的簡單介紹和基本用法。通過本文，您應該已經了解了如何在網頁中使用CodeMirror實現代碼編輯與高亮。當然，CodeMirror還有很多高級特性等待您去發掘。希望本文能幫助您更好地使用CodeMirror，為您的Web開發帶來更多便利。
