Vue code highlighting plug-in comprehensive comparison and evaluation

Comprehensive comparison

From the perspective of active

From the functional point of view

Code highlighting is a must and the community must be active, otherwise it will be too time-consuming to fix bugs without any reference. Functions such as automatic indentation completion, shortcut key operation, search and replace are not necessary. If they are available, it would be best if you can use them to show off, but if they are not available, it will not affect the usage.

Therefore, I picked out the following ones, analyzed them in detail, investigated them one by one, and checked the pitfalls of subsequent development and deployment. The ones with fewer pitfalls and convenience were selected by me.

In-depth comparison

1. Ace

Ace is an embeddable code editor written in JavaScript. It matches the power and performance of native editors like Sublime, Vim, and TextMate. It can be easily embedded into any web page and JavaScript application.

Click to view the official website

2. codemirror

CodeMirror is a JavaScript plugin for highlighting code in the textarea of ​​the editor. It can highlight keywords, functions, variables, etc. for various programming languages. It has rich APIs, extensible functions, and multiple theme styles to meet the needs of various projects.

CodeMirror supports syntax highlighting for a large number of languages, including C, C++, C#, Java, Perl, PHP, JavaScript, Python, Lua, Go, Groovy, Ruby, etc., as well as file formats such as diff, LaTeX, SQL, wiki, Markdown, etc. In addition, CodeMirror also supports code auto-completion, search/replace, HTML preview, line number, selection/search result highlighting, visual tab, Emacs/VIM key binding, code automatic formatting, etc.

CodeMirror adopts the MIT open source license agreement and has been integrated into various applications, such as Adobe Brackets, CoDev, Light Table and other development environments. It is also used as the basic library of various SQL, Haxe, and JavaScript online editors.

Click to view the official website

3. Monaco

Monaco Editor is a code editor that powers VS Code and runs in a browser environment. The editor provides code hints, smart suggestions and other functions. It allows developers to write code more conveniently remotely. The Monaco editor is not supported by mobile browsers or mobile web frameworks. The simple understanding is that the code editor in VSCode and Monaco Editor use many of the same core modules.

4. Conclusion

In general, the functions of these three are quite powerful, so choose one to use based on their shortcomings.

ace, there is no code comparison function, this is not good, we need to compare the differences between the codes of each version, so it is out. (I searched and found a plug-in called ace-diff, which can realize code difference comparison. The main reason for the failure of ace deployment was that it did not support webpack packaging. After ace was built locally, a small worker would help us render the content. After webpack packaging, it became a completely static resource, and the dynamic rendering effect was gone. Although it was supported according to the official website, a blogger tried many methods and all ended in failure.)

Codemirror has poor user interaction effects, and many things need to be extended by yourself to achieve its effects. Learning these extensions will definitely take time and make mistakes. Its method of introducing multiple files brings certain management inconveniences and affects the network performance of the browser.

monaco, Microsoft's VSCode uses many core modules in common with it. With mature and reliable products, the user interaction logic is the best, the native Visual Studio theme, and the code difference comparison effect is also the best. The amount of imported files is huge. I took a look and it is about 70M. The import method is not very compatible and packaging is prone to problems (most of the problems can be solved by packaging with the monaco-editor-webpack-plugin plug-in). The Monaco editor is not supported by mobile browsers or mobile web frameworks. There are really few demos, not even on the official website. The official website looks very nice and has an English reference book, which feels like an English dictionary. It lists a bunch of attributes densely, but I don’t know where to start and how to piece them together into a demo.

The above is the detailed content of the comprehensive comparison and evaluation of the vue code highlighting plug-in. For more information about the vue code highlighting plug-in, please pay attention to other related articles on 123WORDPRESS.COM!