vue中使用prismjs实现代码预览及一键复制

vue中使用prismjs实现代码预览

• npm install prismjs
  

<template>
   <pre class="codeTree q-ma-none">
        <q-btn
          v-if="codeContent"
          id="copyCode"
          dense
          flat
          icon="copy_all"
          size="md"
          color="primary"
          :data-clipboard-text="nativeCode"
          class="copyIcon"
          @click="copyCode">
          	<q-tooltip>全部复制</q-tooltip>
        </q-btn>
        <code class="line-numbers relative-position" :class="classCodeType"  v-html="codeContent"></code>
        </pre>
</template>

<script>
import Prism from "prismjs";
import ClipboardJS from "clipboard";
import "prismjs/themes/prism.css";
import builderService from "./builder-service";
export default {
  name: "CodeView",
  data() {
    return {
      codeId: null,
      nativeCode: null,
      codeContent: null,
      codeType: "",
      classCodeType: "",
    };
  },
  watch: {
    codeContent(newValue, oldValue) {
      this.$nextTick(() => {
        Prism.highlightAll();
      });
    },
  },
  // 防止页签未关闭再进来id丢失
  beforeDestroy() {
    this.$q.sessionStorage.set("codeViewId", this.codeId);
  },
  methods: {
    copyCode() {
      const clipboard = new ClipboardJS("#copyCode");
      clipboard.on("success", (e) => {
        this.$q.notify({
          caption: "代码已复制到剪切板，可粘贴",
          message: "操作成功",
          type: "positive",
        });
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        this.$q.notify({
          message: "代码复制失败",
          type: "negative",
        });
        clipboard.destroy();
      });
    },
    // 获取代码
    getCodeContent(id, codeFileName) {
      builderService.codeViews(id, codeFileName).then((res) => {
        this.visible = false;
        // 由于Prismjs不支持vue，按照js风格处理处理
        const languageType = Prism.languages.js;
        this.codeContent = Prism.highlight(
          res.data,
          languageType,
          this.codeType
        );
        this.nativeCode = res.data;
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/quasar.variables.scss";
.code-view {
  padding: 15px;
  overflow: auto;
  .codeTree {
    height: 100%;
    border-radius: 4px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    padding: 10px;
    overflow: auto;
    border: 1px solid $separator-color;
  }
  pre[class*="language-"] {
    padding: 0;
    margin: 0;
  }
  .copyIcon {
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 999;
  }
}
</style>