网硕互联帮助中心• Prism官网：https://prismjs.com/ • vue-prism-component主页：https://github.com/egoist/vue-prism-component
1、安装 prismjs、vue-prism-component
yarn add prismjs vue-prism-component
2、封装组件
<!– src/components/CodeBlock.vue –>
<template>
<div class="code_block">
<div class="code_header">
<!– 语言 –>
<span class="code_lang">{{ lang }}</span>
<!– 复制按钮 –>
<el-button type="primary" link @click="copyClipboard" :disabled="!code">
<CopyDocument />复制
</el-button>
</div>
<!– 代码 –>
<prism :language="lang" line-numbers class="code_content">{{ code }}</prism>
</div>
</template>
<script>
import 'prismjs'
import Prism from 'vue-prism-component'
//引入默认主题
import 'prismjs/themes/prism.css'
//按需引入语言模块
import 'prismjs/components/prism-bash'
import 'prismjs/components/prism-markup'
export default {
components: {
Prism,
},
props: {
lang: String, //代码语言（必填）
code: String, //代码内容（必填）
},
data() {
return {}
},
methods: {
//复制到剪贴板
async copyClipboard() {
try {
await navigator.clipboard.writeText(this.code);
this.$message.success("已复制到剪贴板");
} catch (err) {
// 降级方案：兼容旧浏览器或权限受限环境
const textarea = document.createElement("textarea");
textarea.value = this.code;
textarea.style.position = "fixed";
textarea.style.opacity = "0";
document.body.appendChild(textarea);
textarea.select();
const success = document.execCommand("copy");
document.body.removeChild(textarea);
if (success) {
this.$message.success("已复制到剪贴板");
} else {
this.$message.warning("复制失败，请手动选择并复制");
}
}
},
},
}
</script>
<style lang="scss">
.code_block {
width: 100%;
.code_header {
background-color: #F5F6F9;
height: 32px;
line-height: 32px;
padding: 0 12px;
border-radius: .3rem .3rem 0 0;
color: #A8ABB2;
width: calc(100% – 24px);
display: flex;
align-items: center;
justify-content: space-between;
}
.code_content {
margin: 0;
border-radius: 0 0 .3rem .3rem;
background-color: #FAFAFC;
}
}
</style>
• 更多主题风格：https://github.com/PrismJS/prism-themes#how-to-use-a-theme • 支持高亮的语言模块：https://prismjs.com/#supported-languages • 关于ElementPlus和SCSS请参考：vue3+elementplus+sass/scss安装配置教程：使用svg图标、引入外部字体、定义变量模块、修改组件样式、一键切换主题等
3、全局注册组件（也可在应用时按需引入）
/* src/main.js */
import { createApp } from "vue";
import App from "./App.vue";
//导入组件
import CodeBlock from "./components/CodeBlock.vue";
//import MoreComponent from "./components/MoreComponent.vue";
const app = createApp(App);
//注册组件
app.component("CodeBlock", CodeBlock);
//app.component("MoreComponent", MoreComponent)
app.mount('#app')
4、应用组件
<!– Example.vue –>
<template>
<!– 全局注册后可直接使用 <CodeBlock /> –>
<!– 单行代码示例 –>
<CodeBlock lang="bash" :code="singleLine" />
<!– 多行代码示例 –>
<CodeBlock lang="xml" :code="multipleLines" />
</template>
<script>
//或按需引入组件（仅此页面生效）
import CodeBlock from '@/components/CodeBlock.vue'
export default {
components: {
CodeBlock, //注册组件（仅此页面生效）
},
data() {
return {
singleLine: 'yarn add prismjs vue-prism-component',
}
},
computed: {
multipleLines() {
return `<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>`
},
},
}
</script>
评论前必须登录！
注册