prismjs代码高亮插件详解
网页代码高亮插件真的是非常多。例如：SyntaxHighlighter ，Google Code Prettify，Highlight.js等等。
今天介绍一个漂亮而且小巧的JS插件：Prism.js
官网地址：http://prismjs.com/index.html
为什么选用Prism.js？
除了简单，小巧之外，还有以下优点：
1.极致易用：引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！
2.天生伶俐：语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。
3.轻如鸿毛：代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB，主题在 1KB 左右。
4.快如闪电：如果可能，支持通过 Web Workers 实现并行。
5.轻松扩展：定义新语言或扩展现有语法，或者新增功能都非常简单。
6.丰富样式：所有的样式通过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等。
谁在使用
本文博客就是使用的Prism.js，我们直接来一段代码示例
HTML：
<!DOCTYPE html> <html> <head> ... <link href="themes/prism.css" rel="stylesheet" /> </head> <body> ... <script src="prism.js"></script> </body> </html>
CSS：
.container .content .copy-link{
border:1px solid #E5E5E5;
background:#f9f9f9;
padding:15px 15px 15px 120px;
margin-bottom:30px;
position: relative;
margin-top:90px;
}PHP：
public function init()
{
parent::init(); // TODO: Change the autogenerated stub
if(Yii::$app->user->id)
{
$this->redirect(Url::home());
}
}实用
使用非常简单，首先引入刚刚下载好的2个文件。
<!DOCTYPE html> <html> <head> ... <link href="themes/prism.css" rel="stylesheet" /> </head> <body> ... <script src="prism.js"></script> </body> </html>
页面上只要遇到类似下面的代码，就会被高亮。
<pre><code class="language-css">p { color: red }</code></pre>Uedtior
再来看市面上使用非常广泛的百度Ueditor编辑器，后台代码编辑会产生如下的HTML代码
<pre class="brush:html;toolbar:false"><link rel="icon" href=""></pre>
并没有产生预期的效果，而是只生成<pre>和一个class="brush:html;toolbar:false"。这个class可是不一般，其中brush:html中的html就代表的是HTML标签。如果在后台我们选择代码语言为java，那么这里会显示brush:java。所以，我们只要获取语言名称就可以构造符合要求的高亮代码。
$(document).ready(function(){
var doc_pre = $("#post_content pre");
doc_pre.each(function(){
var class_val = $(this).attr('class');
var class_arr = new Array();
class_arr = class_val.split(';');
class_arr = class_arr['0'].split(':');
var lan_class = 'language-'+class_arr['1'];
var pre_content = '<code class="'+lan_class+'">'+$(this).html()+'</code>';
$(this).html(pre_content);
});
});随便找了个示例看下：
<pre class="brush:html;toolbar:false language-html"> <code class=" language-html"> <span class="token tag"> <span class="token tag"> <span class="token punctuation"><</span>link </span> <span class="token attr-name">rel</span> <span class="token attr-value"> <span class="token punctuation">=</span> <span class="token punctuation">"</span>icon <span class="token punctuation">"</span> </span> <span class="token attr-name">href</span> <span class="token attr-value"> <span class="token punctuation">=</span> <span class="token punctuation">"</span> <span class="token punctuation">"</span> </span> <span class="token punctuation">></span> </span> </code> </pre>
添加行号
需要实现行号效果，只需要在<pre>标签中加上line-numbers类即可。在之前的js代码中添加一行。
提示：要记得你下载了Line Numbers插件
$(this).attr("class",'line-numbers '+lan_class);
完整代码：
$(document).ready(function(){
var doc_pre = $("#post_content pre");
doc_pre.each(function(){
var class_val = $(this).attr('class');
var class_arr = new Array();
class_arr = class_val.split(';');
class_arr = class_arr['0'].split(':');
var lan_class = 'language-'+class_arr['1'];
var pre_content = '<code class="'+lan_class+'">'+$(this).html()+'</code>';
$(this).html(pre_content);
$(this).attr("class",'line-numbers '+lan_class);
});
}); 除特别注明外，本站所有文章均为技术藤原创，转载请注明出处来自https://www.jishuteng.com/article/1.html
支付宝打赏
微信打赏
参与评论 0条评论