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";
export default defineConfig({
plugins: [
vue(),
prismjs({
languages: ["json", "js"],
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>