prism.js让页面代码变漂亮

基本信息

官网：https://prismjs.com/Github：https://github.com/PrismJS/prismnpm：https://www.npmjs.com/package/prismjs

效果展示

使用方法

常规 <script> 标签引入

直接引入即可，具体见下面：

// 引入资源 <link rel="stylesheet" href="../libaray/prismjs/prism.css"> <script src="../libaray/prismjs/prism.js"></script> // 以下是具体代码 <pre> <code class="language-javascript line-numbers"> function Person(name, age){ this.name = name || 'pelli'; this.age = age || 18; } Person.prototype.sayHi = function(){ console.log('Hi, I am ' + this.name + ', I am ' + this.age + ' years old'); }; </code> </pre>

Vue 组件化开发

使用方法

先安装包 // 安装prismjs npm i prismjs -S // 安装prismjs编译器 npm i babel-plugin-prismjs -D 编辑 .babelrc 配置 "plugins": [ ["prismjs", { "languages": ["javascript", "css", "markup"], // 这是语言类型 "plugins": ["line-numbers"], // 使用了行号还可以添加其他插件，具体看官网 "theme": "twilight", // 主题 "css": true }] ] 在具体的组件中使用 <template> <div> <pre> <code class="language-xml line-numbers">&lt;span class="itsicons"&gt;&amp;#x33;&lt;/span&gt;</code> </pre> </div> </div> </template> <script> import Prism from "prismjs"; //引入插件 export default { data(){ return { } } } </script>

拓展

languages 开发语言设置，可参考官网，只是多种开发语言 plugins 插件可配置多种插件，具体可查看官网 theme 官方提供多种

不生效？

如果需要渲染的文本是从后台读取的，需要手动执行 Prism.highlightAll()，否则出不了效果。

watch: { text(newValue, oldValue){ this.$nextTick(() => { Prism.highlightAll() }) } }