在vue项目中使用prismjs(网页代码高亮插件)

作者: 晨曦的杂货铺 | 来源:发表于2022-06-19 23:12 被阅读0次

在vue项目中使用prismjs(网页代码高亮插件)
vue 中highlight 代码无法高亮
使用prismjs库高亮源代码
vue2.x学习（二）
我的vscode必备插件
Vue.js - day01
Vue中通过highlight.js实现代码高亮
vue（element）中使用codemirror实现代码高亮，
phpstorm
2018-01-13

什么是prismjs

prismjs是一款代码高亮美化插件，在一些技术博客类得网站中需要展示代码时，可以使用他类似与markdown的代码块。
官网链接

如何使用

安装插件

yarn add prismjs

在项目中引入模块

 import "prismjs";
 import "prismjs/themes/prism-okaidia.css";

注意：
在全局中加入Prism属性

const Prism = (window as any).Prism;

在需要美化的代码块中添加样式
const html = Prism.highlight(code, Prism.languages.haml, 'haml');
例如本文加入的代码块：( class="language-css"为加入的背景样式...)

<pre
  class="language-css"
  v-html="
  Prism.highlight(Switch2.__sourceCode, Prism.languages.html, 'html')
        "
        >
</pre>

网页代码高亮样式结果如下：

1.png.png

在vue项目中使用prismjs(网页代码高亮插件)
什么是prismjs prismjs是一款代码高亮美化插件，在一些技术博客类得网站中需要展示代码时，可以使用他类似...
vue 中highlight 代码无法高亮
问题在vue中使用代码高亮插件highlight.js的时候，始终无法生效代码高亮。这里我选择了 Highlig...
使用prismjs库高亮源代码
安装prismjs插件或者引用prismjs 在需要使用的文件上使用注：增加__sourceCode的方法...
vue2.x学习（二）
写vue的时候，打算使用sublime,但是发现不能高亮vue的代码，找了些插件，使sublime对vue进行支持...
我的vscode必备插件
1、vue代码高亮插件Vetur 打开文件-首选项-设置在settings.json中编辑，配置如下代码：重新...
Vue.js - day01
Vue.js - day01 插件推荐 vue官方推出的插件，高亮，一些提示 vue的代码提示框架的学习方式没...
Vue中通过highlight.js实现代码高亮
项目中，我们经常会有代码高亮的需求！那么，在Vue项目中，如实实现代码高亮功能呢？highlight.js是非常不...
vue（element）中使用codemirror实现代码高亮，
vue（element）中使用codemirror实现代码高亮，代码补全，版本差异对比使用的是vue语言，用el...
phpstorm
支持Vue文件高亮从phpstorm的插件（plugins）管理中添加vue.js 打开preferences，...
2018-01-13
Vue 用模块化的方式构建项目想要提高代码的复用性，vue 项目中可以使用插件的方法： MyPlugin.in...