上次介绍了一个简单的示例，基于javascript如何从一段文本解析为一段代码，今天我们看下一下个功能类似，但非常强大的代码编辑器组件
CodeMirror
CodeMirror https://codemirror.net/
在Web开发中，我们经常需要在网页上展示代码，或者让用户直接在网页上编写代码。为了提高用户体验，我们通常会使用代码编辑器来实现代码的高亮、自动补全等功能。而在众多代码编辑器中，CodeMirror无疑是一个功能强大、易用的选项。本文将带您深入了解CodeMirror的基本用法和高级特性，让您能够轻松地在网页中实现代码编辑与高亮。
什么是CodeMirror？
CodeMirror是一个基于JavaScript的代码编辑器，它可以在网页中实现代码的高亮、自动补全等功能。CodeMirror支持多种编程语言，如JavaScript、HTML、CSS、Python等，并且可以通过插件扩展支持更多的语言。CodeMirror的使用非常简单，只需要引入相应的库文件，然后通过简单的配置即可实现代码编辑与高亮。
如何使用CodeMirror？
基于webpack
npm init -ynpm 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
const state = EditorState.create({
doc: 'console.log("hello codemirror")',
extensions: [
basicSetup,
javascript(),
// 其他扩展，包括主题、语法高亮...
],
});
const editor = new EditorView({
state,
parent: document.getElementById("editor")
})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开发带来更多便利。
