文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

强大的代码编辑器组件,你知道几个?

2024-11-29 23:54

关注

CodeMirror

CodeMirror https://codemirror.net/

在Web开发中,我们经常需要在网页上展示代码,或者让用户直接在网页上编写代码。为了提高用户体验,我们通常会使用代码编辑器来实现代码的高亮、自动补全等功能。而在众多代码编辑器中,CodeMirror无疑是一个功能强大、易用的选项。本文将带您深入了解CodeMirror的基本用法和高级特性,让您能够轻松地在网页中实现代码编辑与高亮。

什么是CodeMirror?

CodeMirror是一个基于JavaScript的代码编辑器,它可以在网页中实现代码的高亮、自动补全等功能。CodeMirror支持多种编程语言,如JavaScript、HTML、CSS、Python等,并且可以通过插件扩展支持更多的语言。CodeMirror的使用非常简单,只需要引入相应的库文件,然后通过简单的配置即可实现代码编辑与高亮。

如何使用CodeMirror?

基于webpack

  1. 初始化项目
npm init -y
  1. 引入库文件
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
  1. 创建编辑器
  1. 初始化Codemirror
const state = EditorState.create({
    doc: 'console.log("hello codemirror")',
    extensions: [
        basicSetup,
        javascript(),
        // 其他扩展,包括主题、语法高亮...
    ],
});

const editor = new EditorView({
    state,
    parent: document.getElementById("editor")
})
  1. 配置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, // 关闭代码压缩
  },
  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',
};
  1. 启动
{
    "scripts": {
      "start": "webpack serve --open",
      "build": "webpack --mode=dependencies"
    },
}
npm start

CodeMirror的高级特性

  1. 自定义主题

CodeMirror允许我们自定义主题,以实现个性化的代码高亮效果。可以通过以下方式设置自定义主题:

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})
  1. 自定义语言模式

除了内置的语言模式外,我们还可以自定义语言模式。首先需要引入相应的模式文件,然后通过以下方式设置自定义语言模式:模板是基于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]+ }

  "(" ")"
}

@detectDelim
import {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)
}
  1. 语法高亮

可以根据标签类型设置不同标签的颜色与其他样式,可以根据内置的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版本都可以基于该框架试下,在官网上罗列了具体的:

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.

结束语

以上就是关于CodeMirror的简单介绍和基本用法。通过本文,您应该已经了解了如何在网页中使用CodeMirror实现代码编辑与高亮。当然,CodeMirror还有很多高级特性等待您去发掘。希望本文能帮助您更好地使用CodeMirror,为您的Web开发带来更多便利。

来源:Java技术指北内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯