• 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
企业数字化 ERP 产品动态
相关推荐
RS485总线时通时断丢包严重?从硬件到软件的全链路排查实战手册 前阵子在化工厂调试仪表采集系统,23台压力、温度传感器走RS485总线串联,白天空载调试一切正常,一到晚上车间电机、变频器全开,就开始频繁丢包,有时候连续十几帧收不到回复,历史数据断得稀碎。 一开始下意识觉得是轮询逻辑写得有问题,熬了半宿改了三版调度算法,问题反而… · 2026/9/25 20:00:25
Substrate区块链开发框架解析:模块化设计、Wasm运行时与实战入门 一个词在不同行当里指的东西可以天差地别,生物学家看到 substrate 想到的是酶作用的底物,材料工程师看到它第一反应是镀膜或者印刷用的基材。但过去这几年,如果你在开发者社区搜这个词,十有八九指向的是同一个东西——区块链开发框… · 2026/9/25 19:59:36
LLM微调-训练自己的R1模型 目录
一、准备工作
二、GRPO强化学习
总结: 在 模型蒸馏介绍 里了解了模型蒸馏的过程就是用 SFT/GRPO的方法让学生模型能学习到教师模型的能力,从而使学生模型的能力得到大的提升,并且在LLM微调-训练垂类问答模型 里面学习了SFT模型微调。… · 2026/9/25 19:59:24
zvec-grep Rust 版前瞻:多 Crate 架构重写背后的 6 大设计思路 zvec-grep Rust 版前瞻:多 Crate 架构重写背后的 6 大设计思路 【免费下载链接】zvec-grep Local-first search across your workspace, built for humans and AI agents. 项目地址: https://gitcode.com/gh_mirrors/zv/zvec-grep
zvec-grep 是一个面向人类与… · 2026/9/25 21:32:40
PCA:为什么降维能「去噪」?从特征值分解到核 PCA 从特征值分解到 SVD,理解数据压缩的数学本质开头:高维数据的「诅咒」
上一篇我们学习了正则化,防止过拟合。
今天我们学习主分量分析(PCA)——最经典的降维算法。
你有没有遇到过这种情况?
数据有 1000 个特… · 2026/9/25 21:32:40
GEOFlow CLI完全指南:一行命令远程管理GEO实例的任务、素材与文章 GEOFlow CLI完全指南:一行命令远程管理GEO实例的任务、素材与文章 【免费下载链接】GEOFlow Open-source GEO content engineering and multi-site distribution platform with AI quality inspection, illustrated admin help, hosted sites, browser-assisted pub… · 2026/9/25 21:32:28
19个免费PPT制作网站实测:在线编辑、模板下载与AI辅助工具全指南 做PPT这件事,说大不大,说小也真不小。我身边不少朋友,包括我自己,都经历过那种“内容早就想清楚了,结果在排版上耗掉一整个下午”的窘境。尤其是临时被通知要交一份汇报材料,打开空白幻灯片的那一刻&#x… · 2026/9/25 21:32:09
DeskcommCRM实战:从通信集成到客户全生命周期管理 1. 从"为什么要上DeskcommCRM"说起:客户管理系统不是通讯录的高级版1.1 旧有的客户管理模式,问题到底出在哪接触DeskcommCRM之前,我一度觉得CRM这东西是给大公司撑门面用的。团队不到三十人,销售资料散在每个人自己的Ex… · 2026/9/25 21:32:03
创维E900V22D刷机全攻略:S905L3SB芯片兼容性解析与救砖实战 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31
MQTT协议原理与Broker服务器搭建实战:从Mosquitto到EMQX /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37