标签：scss vue 高亮 wangEditor 代码 selector color hljs

最近在写毕设，vue项目中需要用到富文本编辑器，选择了wangEditor V4.0，在使用过程中设置代码高亮时使用了hightlight.js插件，发现代码能高亮但是代码模块没有应用hightlight的背景，导致代码有些浅色地方很难看

打开浏览器调试，wangEditor虽然挂载了hightlight.js插件，发现在代码块地方并没有添加.hljs的class名称，所以没有背景，但是有添加其他hljs-xx的class名称，所以代码是有高亮效果。

因为这个代码块是在编辑中动态生成，本菜鸟感觉使用dom操作对我而言有点棘手，于是我选择了最笨的方法。

①复制一份hightlight的样式，这里选择了stackoverflow-dark.scss

②创建外部样式dark.scss，同时修改部分地方

需要在pre code前修改为::v-deep .w-e-text pre code实现样式穿透

::v-deep .w-e-text pre code{
  display:block;
  overflow-x:auto;
  padding:1em;
  color:#fff;
  background:#1c1b1b;

  .hljs-subst{color:#fff}.hljs-comment{color:#999}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#88aece}.hljs-attribute{color:#c59bc1}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#f08d49}.hljs-selector-class{color:#88aece}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#b5bd68}.hljs-meta,.hljs-selector-pseudo{color:#88aece}.hljs-built_in,.hljs-literal,.hljs-title{color:#f08d49}.hljs-bullet,.hljs-code{color:#ccc}.hljs-meta .hljs-string{color:#b5bd68}.hljs-deletion{color:#de7176}.hljs-addition{color:#76c490}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
}

③取消掉之前引入的highlight样式，引入自己设置的dark.scss样式

<style lang="scss" scoped>
@import '@/assets/scss/dark.scss';
</style>

锵锵锵，代码背景和高亮就出来了，比之前清晰了不少

更多关于wangEditor可以查看它的官方文档

标签：scss,vue,高亮,wangEditor,代码,selector,color,hljs
来源： https://www.cnblogs.com/Small-Windmill/p/15815771.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。