上次介绍了一个简单的示例，基于javascript如何从一段文本解析为一段代码，今天我们看下一下个功能类似，但非常强大的代码编辑器组件
CodeMirror https://codemirror.net/
在Web开发中，我们经常需要在网页上展示代码，或者让用户直接在网页上编写代码。为了提高用户体验，我们通常会使用代码编辑器来实现代码的高亮、自动补全等功能。而在众多代码编辑器中，CodeMirror无疑是一个功能强大、易用的选项。本文将带您深入了解CodeMirror的基本用法和高级特性，让您能够轻松地在网页中实现代码编辑与高亮。
CodeMirror是一个基于JavaScript的代码编辑器，它可以在网页中实现代码的高亮、自动补全等功能。CodeMirror支持多种编程语言，如JavaScript、HTML、CSS、Python等，并且可以通过插件扩展支持更多的语言。CodeMirror的使用非常简单，只需要引入相应的库文件，然后通过简单的配置即可实现代码编辑与高亮。
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<div id="app"></div>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允许我们自定义主题，以实现个性化的代码高亮效果。可以通过以下方式设置自定义主题：
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版本都可以基于该框架试下，在官网上罗列了具体的：
Works well with screen readers and keyboard-only users.
Use the platform's native selection and editing features on phones.
Support mixing of right-to-left and left-to-right text.
Color code to reflect syntactic structure.
Display gutters with line numbers or other information next to the code.
Provide language-specific completion hints in the editor.
Temporarily hide parts of the document.
Editor-specific search, regexp search, and replace functionality.
Detailed parse trees allow many types of language integration.
Robustly implement demanding editor extensions.
Most features are implemented on top of a generic public API.
Remains responsive even on huge documents and long lines.
Automatically insert matching brackets during typing.
Show error and warning messages in the editor.
Mix font styles and sizes, add widgets in the content.
Import or create custom visual editor styles.
Allow multiple users to edit the same document.
Undo and redo functionality with collab editing support.
Select and edit multiple ranges of the document at once.
Provide custom text to display or announce to the user.
Find a full description of the library's features in the docs.
以上就是关于CodeMirror的简单介绍和基本用法。通过本文，您应该已经了解了如何在网页中使用CodeMirror实现代码编辑与高亮。当然，CodeMirror还有很多高级特性等待您去发掘。希望本文能帮助您更好地使用CodeMirror，为您的Web开发带来更多便利。
本文链接：http://www.28at.com/showinfo-26-81062-0.html强大的代码编辑器组件，你知道几个？
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号