Vue.js 项目使用 vue-prism-editor 语法高亮与编辑器

た入场券 2022-11-26 01:48 256阅读 0赞

记录一下在 Vue.js 项目中使用 vue-prism-editor 进行语法高亮显示代码，并兼具代码编辑功能。JavaScript 中有几个比较典型的语法高亮显示的代码库，例如 [SHJS][], [SyntaxHighlighter][], [Rainbow][],   [highlight.js][]。本博客曾经使用过 SyntaxHighlighter 来显示日志中的示例代码，现今所采用的是基于 PHP 的 [Crayon Syntax Highlighter][]。除了只为了高亮显示代码外，有时候还需处理在线编辑代码，许多年前试用过 [CodeMirror][], 而今天要上手 [Prism.js][] 也能够支持代码编辑。

官方 Demo: [prism-editor.netlify.com][]  
Codesandbox:  [https://codesandbox.io/s/61yrlnlnmn][https_codesandbox.io_s_61yrlnlnmn]。

为了给 Vue.js 项目提供方便，有人专门做了一个 Vue.js 的插件 [vue-prism-editor][]，本文直接使用该插件，而非直接使用 Prism.js。并且项目蓝本用 `@vue/cli 4.4.6` 的命令

> $ vue create vue-prism-editor-demo

创建的，创建过程可参考 [Flask 和 Vue.js 开发及整合部署实例][Flask _ Vue.js] 的 **创建 Vue 项目**一节，此文简单些，就只选择 `default (babel, eslint)` 默认项来创建 [阅读全文 >>][Link 1]

[SHJS]: http://shjs.sourceforge.net/
[SyntaxHighlighter]: http://alexgorbatchev.com/SyntaxHighlighter/
[Rainbow]: https://craig.is/making/rainbows
[highlight.js]: https://highlightjs.org/
[Crayon Syntax Highlighter]: https://github.com/aramk/crayon-syntax-highlighter
[CodeMirror]: https://codemirror.net/
[Prism.js]: http://prismjs.com/
[prism-editor.netlify.com]: https://prism-editor.netlify.com/
[https_codesandbox.io_s_61yrlnlnmn]: https://codesandbox.io/s/61yrlnlnmn
[vue-prism-editor]: https://github.com/koca/vue-prism-editor
[Flask _ Vue.js]: https://yanbin.blog/flask-vue-js-integration-dev-deploy/#create-vue-project
[Link 1]: https://yanbin.blog/vue-js-vue-prism-editor/#more-10461