prism.js让页面代码变漂亮

基本信息

官网：https://prismjs.com/
Github：https://github.com/PrismJS/prism
npm：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()})}
}

prism.js让页面代码变漂亮相关推荐

[网络收集]JS刷新页面总和！多种JS刷新页面代码!
1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔10秒刷新一次 2) < ...
多种JS刷新页面代码!
1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔10秒刷新一次 2) < ...
JS刷新页面总和！多种JS刷新页面代码!
1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔10秒刷新一次 2) < ...
ext 日期时间控件js html页面代码,Ext JS框架中日期函数的用法及日期选择控件的实现...
增加或减少时间,这个函数不改变原有Date对象的值,而是返回一个新的Date对象. // @param {Date} date 原日期对象. // @param {String} interval v ...
html js注册页面代码,JS一个简单的注册页面实例
// $(function(){ // $("input[name='uname']").blur(function(){ // var unamestr = $(this).va ...
php prism,漂亮的代码语法高亮库：Prism.js
如何使用我们只需要在页面上引入 prism.css 和 prism.js 文件: ... ... 根据HTML5规范,代码标记需要使用元素,使用Prism时,可以给code元素添加language- ...
Vue页面代码高亮展示之Prism语法高亮工具
基本介绍 Prism 是一款轻量级.可扩展的语法高亮工具,在构建时考虑了现代 Web 标准.它被用于数百万个网站,包括您每天访问的一些网站. Prism 支持自定义扩展代码的语言.主题和插件选项,勾选 ...
JS+CSS打造一款漂亮绿色相册代码
代码简介: JavaScript+CSS完成的漂亮相册展示效果,运用了大量CSS代码,JS代码并不多,它可以自动获取链接图片的地址以及TITLE标签的信息,当鼠标点击小图的时候它就会自动加载大图,类似 ...
如何在页面调用JS函数的代码
如何在页面调用JS函数的代码这个所有的人都不能回复啊,只有一个人可以的,晕!我第一次发现JS的功能有"打下来",呵呵! 言归正传: 下面是一个很简单的例子: 首先写一个JS函数, ...
找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置script元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分...
找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分最常用的方式是在页 ...

prism.js让页面代码变漂亮

基本信息

效果展示

使用方法

常规 `<script>` 标签引入

`Vue` 组件化开发

使用方法

拓展

不生效？

prism.js让页面代码变漂亮相关推荐

最新文章

热门文章

prism.js让页面代码变漂亮

基本信息

效果展示

使用方法

常规 <script> 标签引入

Vue 组件化开发

使用方法

拓展

不生效？

prism.js让页面代码变漂亮相关推荐

最新文章

热门文章

常规 `<script>` 标签引入

`Vue` 组件化开发