vue3集成prismjs

vue3集成prismjs代码高亮

1.下载

# prismjs 
npm i prismjs -S
​
# prismjs 类型
npm i  @types/prismjs -D
​
# vite
npm install vite-plugin-prismjs -D
​

2.配置

• vite.config.ts

  import { defineConfig } from "vite";
  import vue from "@vitejs/plugin-vue";
  import { resolve } from "path";
  import prismjs from "vite-plugin-prismjs";
  ​
  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [
      vue(),
      prismjs({
        languages: ["json", "js"],
        //  languages: 'all',
        plugins: ["line-numbers"], //配置显示行号插件
        theme: "solarizedlight", //主题名称
        css: true,
      }),
    ],
    resolve: {
      alias: {
        "@": resolve("src"),
        comps: resolve("src/components"),
        api: resolve("src/api"),
        views: resolve("src/views"),
        utils: resolve("src/utils"),
        router: resolve("src/router"),
      },
    },
    base: "./",
    server: {
      port: 8066,
      open: true,
      cors: true,
    },
  });
  ​
  

3.封装

<template>
  <pre :class="'hx-scroll ' + lineNumbers">
    <code :class="'language-'+ type" v-html="Prism.highlight(code, Prism.languages[type], type)"></code>
 </pre>
</template>
​
<script setup lang="ts">
import { onMounted, computed } from "vue";
import Prism from "prismjs";
​
const props = defineProps({
  code: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "html",
  },
  isShowlineNumbers: {
    type: Boolean,
    default: false,
  },
});
const lineNumbers = computed(() => {
  return props.isShowlineNumbers ? "line-numbers" : "";
});
onMounted(() => {
  Prism.highlightAll(); //切换菜单重新渲染
});
</script>
​

4.使用

<template>
  <div class="formula-content">
    <preview-code v-if="flag" :code="code" :type="type"> </preview-code>
    <span class="description">{{ description }}</span>
  </div>
</template>
​
<script setup lang="ts">
import { reactive, ref, defineProps, PropType, watch, nextTick } from "vue";
import PreviewCode from "comps/prismjs/Index.vue";
​
const props = defineProps({
  code: {
    type: String,
    default: `console.log('hello world);`,
  },
  type: {
    type: String,
    default: "js",
  },
  description: {
    type: String,
    default: "你好，世界！",
  },
});
let flag = ref(true);
watch(
  () => props.code,
  () => {
    flag.value = false;
    nextTick(() => {
      flag.value = true;
    });
  }
);
</script>
​
<style lang="scss" scoped>
.formula-content {
  margin: 10px;
}
</style>
​