vue-页面高亮展示code代码组件

在main.js里引用组件

import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark.css";

Vue.directive("highlight", function (el) {
  let blocks = el.querySelectorAll("pre code");
  blocks.forEach((block) => {
    hljs.highlightBlock(block);
  });
 });
 Vue.prototype.$hljs = hljs;

在页面里使用：

<template>
  <Card>
    <div>
      <pre v-highlight>
        <code>
          {{ code }}
        </code>
      </pre>
    </div>
  </Card>
</template>

调试的时候代码可以用``包含起来，这样就能按照内容展示了

code: `
package testcases.pangu.onetoone;

import com.xes.base.PlaywrightFactory;
import com.xes.pangu.pages.LoginPage;
import org.testng.Assert;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;
import testcases.pangu.TestBase;
`