Prism--轻量级的、可扩展的网页代码修饰器(代码高亮显示插件)

对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉。一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等。Prism是一种轻量级的、可扩展的语法高亮器,Prism也支持大部分流行的编程语言,并且支持多种主题样式,开发者只需要引用CSS文件和JS文件即可完成


官网:http://prismjs.com/


主题风格

prism提供多种高亮主题

按自己口味来呗...

1524648225371811.png


使用方法

在官网右上角DOWNLOAD

点击进入下载页面

随后便会看到满页面的单选复选框

没错,眼神确认

要做的就是勾勾勾...

1.选择压缩级别

有开发版和压缩版可供选择

体积相差一倍左右

1524661836415219.png

2.选择主题

选择完成主题

在页面的最下方可预览

1524662043604198.png

3.选择支持语言

1524662398229797.png

4.选择插件

1524662607196954.png

5.下载css和js文件

这里会显示最终下载文件体积大小

根据自己使用情况适当选择就好了

选择完成后点击下载js和css文件即可

1524662946906772.png

使用

首先需要引入css和js文件

<script src="prism.js"></script>
<link rel="stylesheet" href="prism.css">

html代码部署

这里以选择显示行号插件

支持php语言为例

<pre class="line-numbers">
   <code class="language-php">
       p { color: red }
       wubin.pro   
   </code>
</pre>

样式预览

注:下面是一张图片

1524663775743991.png


本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。

武斌博客 http://www.wubin.pro

Top