強(qiáng)大的代碼編輯器組件，你知道幾個？
上次介紹了一個簡單的示例，基于javascript如何從一段文本解析為一段代碼，今天我們看下一下個功能類似，但非常強(qiáng)大的代碼編輯器組件
CodeMirror
CodeMirror https://codemirror.net/
在Web開發(fā)中，我們經(jīng)常需要在網(wǎng)頁上展示代碼，或者讓用戶直接在網(wǎng)頁上編寫代碼。為了提高用戶體驗(yàn)，我們通常會使用代碼編輯器來實(shí)現(xiàn)代碼的高亮、自動補(bǔ)全等功能。而在眾多代碼編輯器中，CodeMirror無疑是一個功能強(qiáng)大、易用的選項(xiàng)。本文將帶您深入了解CodeMirror的基本用法和高級特性，讓您能夠輕松地在網(wǎng)頁中實(shí)現(xiàn)代碼編輯與高亮。
什么是CodeMirror？
CodeMirror是一個基于JavaScript的代碼編輯器，它可以在網(wǎng)頁中實(shí)現(xiàn)代碼的高亮、自動補(bǔ)全等功能。CodeMirror支持多種編程語言，如JavaScript、HTML、CSS、Python等，并且可以通過插件擴(kuò)展支持更多的語言。CodeMirror的使用非常簡單，只需要引入相應(yīng)的庫文件，然后通過簡單的配置即可實(shí)現(xiàn)代碼編輯與高亮。
如何使用CodeMirror？
基于webpack
- 初始化項(xiàng)目
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- 創(chuàng)建編輯器
<div id="app">
</div>- 初始化Codemirror
const state = EditorState.create({
doc: 'console.log("hello codemirror")',
extensions: [
basicSetup,
javascript(),
// 其他擴(kuò)展，包括主題、語法高亮...
],
});
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, // 關(guān)閉代碼壓縮
},
module: {
rules: [
{
test: /\.scss$/, // 正則表達(dá)式，匹配所有 .scss 文件
use: [
'style-loader', // 將 JS 字符串生成為 style 節(jié)點(diǎn)
'css-loader', // 將 CSS 轉(zhuǎn)化成 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允許我們自定義主題，以實(shí)現(xiàn)個性化的代碼高亮效果?？梢酝ㄟ^以下方式設(shè)置自定義主題：
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})- 自定義語言模式
除了內(nèi)置的語言模式外，我們還可以自定義語言模式。首先需要引入相應(yīng)的模式文件，然后通過以下方式設(shè)置自定義語言模式：模板是基于lezer解析,syntax.grammar，基于lezer的語法解析器，可以自定義語法規(guī)則，實(shí)現(xiàn)自定義語言模式，像之前那樣逐個對字符處理。
@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)
}- 語法高亮
可以根據(jù)標(biāo)簽類型設(shè)置不同標(biāo)簽的顏色與其他樣式，可以根據(jù)內(nèi)置的tag類型定義不同的顯示風(fēng)格：
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的擴(kuò)展點(diǎn)很多，類似于Visual Studio Code的Web版本都可以基于該框架試下，在官網(wǎng)上羅列了具體的：
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.
結(jié)束語
以上就是關(guān)于CodeMirror的簡單介紹和基本用法。通過本文，您應(yīng)該已經(jīng)了解了如何在網(wǎng)頁中使用CodeMirror實(shí)現(xiàn)代碼編輯與高亮。當(dāng)然，CodeMirror還有很多高級特性等待您去發(fā)掘。希望本文能幫助您更好地使用CodeMirror，為您的Web開發(fā)帶來更多便利。
