vue插入高亮格式化的html代码样式丢失不生效

Leobanado 2022-12-05 09:48:19

使用highlightJs格式化代码字符串后，得到了包含高亮样式的html代码。通过v-html显示到页面时，发现class被v-html指令过滤，导致样式失效

https://blog.csdn.net/m0_63452347/article/details/127630835

...全文

97 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

文章目录js 实现代码格式化调用 api实现代码高亮引入用法highlight.js 高亮代码不换行innerText 和 innerHTML 有什么区别解决 innerHTML 渲染为真实节点的问题上色后都是 span 标签，是怎么做到换行的？vue 中使用 highlight.js用指令使用 js_beautify关于文章开头的编辑器实现一个简易版的网页编辑器，没有智能提示，也不会自动高亮标签（需要手动高亮）用的是 vue+ Highlight.js + js-beautify 效果如下图 js

使用vs code 开发vue项目的时候，往往会通过一些插件来帮助我们高效的开发，针对vue代码的格式化和高亮显示有两个比较好的插件，一个是vetur（vue2）,另一个是volar（vue3）。最近由于换了新的主机，然后重新安装了一下vs code，因为开发的是vue3项目，自然而然的安装了一下volar插件，发现安装之后代码并没有高亮显示，重启编辑器依然不生效。查找资料发现在vs code的设置中有个配置可以影响代码的颜色高亮显示。注释之后保存，返回vue项目代码就可以看到代码高亮显示了。

使用vs code 开发vue项目的时候，往往会通过一些插件来帮助我们高效的开发，针对vue代码的格式化和高亮显示有两个比较好的插件，一个是vetur（vue2）,另一个是volar（vue3）。最近由于换了新的主机，然后重新安装了一下vs code，因为开发的是vue3项目，自然而然的安装了一下volar插件，发现安装之后代码并没有高亮显示，重启编辑器依然不生效。查找资料发现在vs code的设置中有个配置可以影响代码的颜色高亮显示。注释之后保存，返回vue项目代码就可以看到代码高亮显示了。

1-1 代码高亮显示但不可以实现编辑输入vue-highlightjs 1-1-1 vue3 1-1-2 vue2 1-2 编辑输入高亮代码，进行格式规范code-mirror 1-2-1 展示 1-2-2 基本配置 1-2-3 使用

代码格式 shift alt f 格式得到名称描述 vetur vue文件高亮 vue文件的格式化 prettier .pretierrc 文件

web前端开发

7,924

社区成员

237

社区内容

发帖

与我相关

我的任务

javascriptjqueryvue.js 个人社区北京·昌平区

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章