微客导航 » 文章资讯 » vue 使用monaco实现代码高亮

vue 使用monaco实现代码高亮

2023-07-04 17:08:09 248

使用的是vue语言，用element的组件，要做一个在线编辑代码，要求输入代码内容，可以进行高亮展示，可以切换各不同语言，而且支持关键字补全，还要有一个各不同版本间的代码左右比较，这就是需求。

至于为什么选中monaco，请查看vue（element）中代码高亮插件全面对比

好了，现在正式开工吧！

首先需要下载monaco-editor组件，monaco-editor-webpack-plugin组件

npminstallmonaco-editor
npminstallmonaco-editor-webpack-plugin

当然啦，npm下载很是缓慢，换个国内镜像，淘宝的吧。果然，速度就嗖嗖的起来。

npminstall-gcnpm--registry=https://registry.npm.taobao.org
cnpminstall

cnpminstallmonaco-editor
cnpminstallmonaco-editor-webpack-plugin

可在node_modules下看到其目录结构

核心代码如下所示

首先写个组件，供其他页面引入调用，

CodeEditor.vue






.code-container{
width:100%;
height:100%;
overflow:hidden;
border:1pxsolid#eaeaea;
.monaco-editor.scroll-decoration{
box-shadow:none;
}
}

引入页面，供本页面使用

index.vue







.container{
text-align:left;
padding:10px;
}

效果如下所示

代码自动提示效果，如下所示

代码高亮效果，代码段折叠效果，右侧预览效果如下所示

以上就是vue使用monaco实现代码高亮的详细内容，更多关于vue代码高亮的资料请关注毛票票其它相关文章！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue 使用monaco实现代码高亮

热门推荐

随机推荐