vue3+prism封装组件：多语言自动高亮代码块，支持一键复制
发布时间：2026/9/25 20:00:43 作者：尧图编辑部 阅读量：1,286
• Prism官网https://prismjs.com/• vue-prism-component主页https://github.com/egoist/vue-prism-component1、安装 prismjs、vue-prism-componentyarnaddprismjs vue-prism-component2、封装组件!-- src/components/CodeBlock.vue --templatedivclasscode_blockdivclasscode_header!-- 语言 --spanclasscode_lang{{ lang }}/span!-- 复制按钮 --el-buttontypeprimarylinkclickcopyClipboard:disabled!codeCopyDocument/复制/el-button/div!-- 代码 --prism:languagelangline-numbersclasscode_content{{ code }}/prism/div/templatescriptimportprismjsimportPrismfromvue-prism-component//引入默认主题importprismjs/themes/prism.css//按需引入语言模块importprismjs/components/prism-bashimportprismjs/components/prism-markupexportdefault{components:{Prism,},props:{lang:String,//代码语言必填code:String,//代码内容必填},data(){return{}},methods:{//复制到剪贴板asynccopyClipboard(){try{awaitnavigator.clipboard.writeText(this.code);this.$message.success(已复制到剪贴板);}catch(err){// 降级方案兼容旧浏览器或权限受限环境consttextareadocument.createElement(textarea);textarea.valuethis.code;textarea.style.positionfixed;textarea.style.opacity0;document.body.appendChild(textarea);textarea.select();constsuccessdocument.execCommand(copy);document.body.removeChild(textarea);if(success){this.$message.success(已复制到剪贴板);}else{this.$message.warning(复制失败请手动选择并复制);}}},},}/scriptstylelangscss.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请参考vue3elementplussass/scss安装配置教程使用svg图标、引入外部字体、定义变量模块、修改组件样式、一键切换主题等3、全局注册组件也可在应用时按需引入/* src/main.js */import{createApp}fromvue;importAppfrom./App.vue;//导入组件importCodeBlockfrom./components/CodeBlock.vue;//import MoreComponent from ./components/MoreComponent.vue;constappcreateApp(App);//注册组件app.component(CodeBlock,CodeBlock);//app.component(MoreComponent, MoreComponent)app.mount(#app)4、应用组件!-- Example.vue --template!-- 全局注册后可直接使用 CodeBlock / --!-- 单行代码示例 --CodeBlocklangbash:codesingleLine/!-- 多行代码示例 --CodeBlocklangxml:codemultipleLines//templatescript//或按需引入组件仅此页面生效importCodeBlockfrom/components/CodeBlock.vueexportdefault{components:{CodeBlock,//注册组件仅此页面生效},data(){return{singleLine:yarn add prismjs vue-prism-component,}},computed:{multipleLines(){return?xml version1.0 encodingUTF-8? note toGeorge/to fromJohn/from headingReminder/heading bodyDont forget the meeting!/body /note},},}/script
尧图网站开发 