一加首款折疊屏！一加Open渲染圖出爐：罕見單手可握小尺寸
8月5日消息，此前就有爆料稱，一加首款折疊屏手機將會在第三季度上市，如今隨著時間臨近，新機的各種消息也開始浮出水面。據悉，這款新機將會被命名為“On
上次介紹了一個簡單的示例，基于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 { '"' (!["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)}可以根據標簽類型設置不同標簽的顏色與其他樣式，可以根據內置的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://m.www897cc.com/showinfo-26-81062-0.html強大的代碼編輯器組件，你知道幾個？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號