強(qiáng)大的代碼編輯器組件，你知道幾個(gè)？
上次介紹了一個(gè)簡(jiǎn)單的示例，基于javascript如何從一段文本解析為一段代碼，今天我們看下一下個(gè)功能類似，但非常強(qiáng)大的代碼編輯器組件
CodeMirror
CodeMirror https://codemirror.net/
在Web開(kāi)發(fā)中，我們經(jīng)常需要在網(wǎng)頁(yè)上展示代碼，或者讓用戶直接在網(wǎng)頁(yè)上編寫(xiě)代碼。為了提高用戶體驗(yàn)，我們通常會(huì)使用代碼編輯器來(lái)實(shí)現(xiàn)代碼的高亮、自動(dòng)補(bǔ)全等功能。而在眾多代碼編輯器中，CodeMirror無(wú)疑是一個(gè)功能強(qiáng)大、易用的選項(xiàng)。本文將帶您深入了解CodeMirror的基本用法和高級(jí)特性，讓您能夠輕松地在網(wǎng)頁(yè)中實(shí)現(xiàn)代碼編輯與高亮。
什么是CodeMirror？
CodeMirror是一個(gè)基于JavaScript的代碼編輯器，它可以在網(wǎng)頁(yè)中實(shí)現(xiàn)代碼的高亮、自動(dòng)補(bǔ)全等功能。CodeMirror支持多種編程語(yǔ)言，如JavaScript、HTML、CSS、Python等，并且可以通過(guò)插件擴(kuò)展支持更多的語(yǔ)言。CodeMirror的使用非常簡(jiǎn)單，只需要引入相應(yīng)的庫(kù)文件，然后通過(guò)簡(jiǎn)單的配置即可實(shí)現(xiàn)代碼編輯與高亮。
如何使用CodeMirror？
基于webpack
- 初始化項(xiàng)目
npm init -y- 引入庫(kù)文件
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ò)展，包括主題、語(yǔ)法高亮...
],
});
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',
};- 啟動(dòng)
{
"scripts": {
"start": "webpack serve --open",
"build": "webpack --mode=dependencies"
},
}npm startCodeMirror的高級(jí)特性
- 自定義主題
CodeMirror允許我們自定義主題，以實(shí)現(xiàn)個(gè)性化的代碼高亮效果。可以通過(guò)以下方式設(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})- 自定義語(yǔ)言模式
除了內(nèi)置的語(yǔ)言模式外，我們還可以自定義語(yǔ)言模式。首先需要引入相應(yīng)的模式文件，然后通過(guò)以下方式設(shè)置自定義語(yǔ)言模式：模板是基于lezer解析,syntax.grammar，基于lezer的語(yǔ)法解析器，可以自定義語(yǔ)法規(guī)則，實(shí)現(xiàn)自定義語(yǔ)言模式，像之前那樣逐個(gè)對(duì)字符處理。
@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)
}- 語(yǔ)法高亮
可以根據(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é)束語(yǔ)
以上就是關(guān)于CodeMirror的簡(jiǎn)單介紹和基本用法。通過(guò)本文，您應(yīng)該已經(jīng)了解了如何在網(wǎng)頁(yè)中使用CodeMirror實(shí)現(xiàn)代碼編輯與高亮。當(dāng)然，CodeMirror還有很多高級(jí)特性等待您去發(fā)掘。希望本文能幫助您更好地使用CodeMirror，為您的Web開(kāi)發(fā)帶來(lái)更多便利。
