最近在寫畢設，vue專案中需要用到富文字編輯器，選擇了wangEditor V4.0，在使用過程中設定程式碼高亮時使用了hightlight.js外掛，發現程式碼能高亮但是程式碼模組沒有應用hightlight的背景，導致程式碼有些淺色地方很難看

開啟瀏覽器除錯，wangEditor雖然掛載了hightlight.js外掛，發現在程式碼塊地方並沒有新增.hljs的class名稱，所以沒有背景，但是有新增其他hljs-xx的class名稱，所以程式碼是有高亮效果。

因為這個程式碼塊是在編輯中動態生成，本菜鳥感覺使用dom操作對我而言有點棘手，於是我選擇了最笨的方法。

①複製一份hightlight

②建立外部樣式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可以檢視它的官方文件