一加Ace2 Pro官宣：普及16G內(nèi)存 引領(lǐng)24G
一加官方今天繼續(xù)為本月發(fā)布的新機一加Ace2 Pro帶來預(yù)熱，公布了內(nèi)存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引領(lǐng)，還有呢？#一加Ace2Pro#，2023 年 8 月，敬請期待。”同時
上次介紹了一個簡單的示例，基于javascript如何從一段文本解析為一段代碼，今天我們看下一下個功能類似，但非常強大的代碼編輯器組件
CodeMirror https://codemirror.net/
在Web開發(fā)中，我們經(jīng)常需要在網(wǎng)頁上展示代碼，或者讓用戶直接在網(wǎng)頁上編寫代碼。為了提高用戶體驗，我們通常會使用代碼編輯器來實現(xiàn)代碼的高亮、自動補全等功能。而在眾多代碼編輯器中，CodeMirror無疑是一個功能強大、易用的選項。本文將帶您深入了解CodeMirror的基本用法和高級特性，讓您能夠輕松地在網(wǎng)頁中實現(xiàn)代碼編輯與高亮。
CodeMirror是一個基于JavaScript的代碼編輯器，它可以在網(wǎng)頁中實現(xiàn)代碼的高亮、自動補全等功能。CodeMirror支持多種編程語言，如JavaScript、HTML、CSS、Python等，并且可以通過插件擴展支持更多的語言。CodeMirror的使用非常簡單，只需要引入相應(yīng)的庫文件，然后通過簡單的配置即可實現(xiàn)代碼編輯與高亮。
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, // 關(guān)閉代碼壓縮 }, module: { rules: [ { test: //.scss$/, // 正則表達式，匹配所有 .scss 文件 use: [ 'style-loader', // 將 JS 字符串生成為 style 節(jié)點 '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允許我們自定義主題，以實現(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ī)則，實現(xiàn)自定義語言模式，像之前那樣逐個對字符處理。
@top Program { expression* }@skip { space | LineComment }expression { Identifier | String | Boolean | Application { "(" expression* ")" }}@tokens { Identifier { $[a-zA-Z_/-0-9]+ } String { '"' (!["http://] | "http://" _)* '"' } 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ù)標簽類型設(shè)置不同標簽的顏色與其他樣式，可以根據(jù)內(nèi)置的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版本都可以基于該框架試下，在官網(wǎng)上羅列了具體的：
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.
以上就是關(guān)于CodeMirror的簡單介紹和基本用法。通過本文，您應(yīng)該已經(jīng)了解了如何在網(wǎng)頁中使用CodeMirror實現(xiàn)代碼編輯與高亮。當然，CodeMirror還有很多高級特性等待您去發(fā)掘。希望本文能幫助您更好地使用CodeMirror，為您的Web開發(fā)帶來更多便利。
本文鏈接：http://www.www897cc.com/showinfo-26-81062-0.html強大的代碼編輯器組件，你知道幾個？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號