轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery Litelighter</title>

<style>

body{background: #FAF9F4;}
#wrapper h1{ color: #000; letter-spacing: 2px; font-size: 30px;}
#wrapper h2{ color: #74151F; letter-spacing: 2px; font-size: 24px; }
#wrapper h3{ color: #555; letter-spacing: 2px;font-size: 22px; }
#wrapper h4{color: #555; letter-spacing: 2px; font-size: 18px; }
#wrapper p{ line-height: 30px;color: #555;font-size: 16px; margin: 10px 0; }
#wrapper a{ color: #7B94B2; }
#wrapper a:hover{ color: #5B7492; }
#wrapper{ text-align: left; margin: 40px; background-color:#FCE8E0;min-height: 200px; padding: 20px; }
#nav{ margin: 0 0 20px 20px; }
#wrapper pre{ margin: 10px 0; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;font-size:18px;}
#wrapper pre.code{overflow: auto;}
#wrapper textarea{width:780px;background: #ccc;overflow: hidden;padding:5px 0 5px 20px;resize:none;color: #555;margin: 20px 0;}

</style>
</head>
<body>
<div class="wrap">
<h1>轻量级jQuery语法高亮代码高亮插件jQuery Litelighter</h1>

官网:http://trentrichardson.com/examples/jQuery-Litelighter/

下载:https://github.com/trentrichardson/jQuery-Litelighter
<p>
拥有两种主题颜色显示代码: <br>
data-llstyle="dark"or data-llstyle="light";<br>
可调整字体颜色大小;<br>
可添加指定代码样式,提供通用、js、css,html;<br>
支持JS、HTML CSS 以及PHP、SQL代码语法高亮显示;
</p>
<h2>使用方法:</h2>

<h3>1.引入js插件</h3>
<textarea style="height:50px;">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-litelighter.js"></script>
<script type="text/javascript" src="js/jquery-litelighter-extra.js"></script>
</textarea>
<h3>2.html文件</h3>
<textarea style="height:260px;">
<pre class="code example" data-lllanguage="js" data-llstyle="dark">
内容:小括号用&lt;和&gt;代替;
</pre>
内容:
&lt;!--This is a comment--&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;th data-ptcolumn="description"&gt;Description&lt;/th&gt;
&lt;th data-ptcolumn="type"&gt;Type&lt;/th&gt;
&lt;th data-ptcolumn="purchased"&gt;Purchased&lt;/th&gt;
&lt;th data-ptcolumn="condition"&gt;Condition&lt;/th&gt;
&lt;th data-ptcolumn="modelnum"&gt;Model #&lt;/th&gt;
&lt;th data-ptcolumn="serialnum"&gt;Serial #&lt;/th&gt;
&lt;th data-ptcolumn="assignedto"&gt;Assigned To&lt;/th&gt;
&lt;th data-ptcolumn="lang"&gt;Language&lt;/th&gt;
&lt;/tr&gt;
&lt;/table&gt;
</textarea>
<h3>3.函数调用</h3>
<textarea style="height:125px;">
<script type="text/javascript">
$(document).ready(function(){

$('pre').litelighter({
style: 'light',
});
});
</script>
</textarea>
</div>

<div id="wrapper">
<h3>例子:</h3>

<h3>JS</h3>
<pre class="code example" data-lllanguage="js" data-llstyle="dark">
$pt = $('#listingsTable1').powertable({
controller: '#tableController',
moveDisabled: ['condition'],
fixedColumns: ['description'],
fixedRows: [0]
});
</pre>
<h3>Html</h3>
<pre class="code example" data-lllanguage="html" data-llstyle="dark">
&lt;!--This is a comment--&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;th data-ptcolumn="description"&gt;Description&lt;/th&gt;
&lt;th data-ptcolumn="type"&gt;Type&lt;/th&gt;
&lt;th data-ptcolumn="purchased"&gt;Purchased&lt;/th&gt;
&lt;th data-ptcolumn="condition"&gt;Condition&lt;/th&gt;
&lt;th data-ptcolumn="modelnum"&gt;Model #&lt;/th&gt;
&lt;th data-ptcolumn="serialnum"&gt;Serial #&lt;/th&gt;
&lt;th data-ptcolumn="assignedto"&gt;Assigned To&lt;/th&gt;
&lt;th data-ptcolumn="lang"&gt;Language&lt;/th&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;style type="text/css"&gt;
body{ font-size: 12px; background-color: #005500; }
#myelement{
line-height: 22px;
font-size: 2em;
}
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
/*
here is some script
*/
if(myvar == "foobar"){
for(i=1; i < myarr.length; i++){
// some output
$('#myEl').removeClass('highlight');
return "2012-06-23".match( /^(\d{4})\-(\d{2})\-(\d{2})$/ );
}
}
&lt;/script&gt;</pre>

<h3>CSS</h3>
<pre class="code example" data-lllanguage="css" data-llstyle="dark">
/* pt specific styles: ptfixed, ptdragover, ptdraghandle, ptshowhide */
table tr th.ptfixed{ font-size: 12%; /* a fixed table header cell */ }

table tr td.ptfixed{ color: #8F9657; }

table .ptdragover{ height: 100px; width: 100%; }

table .ptdraghandle{ font-family: "Sans Serif"; }

table .ptshowhide:hover{ /* class given to a generated show/hide link */ }</pre>

<h3>Generic</h3>
<pre class="code example" data-lllanguage="generic" data-llstyle="dark">
// some comments
for(i=0; i&lt;10; i++){
/*
this is some pseudo code
*/
str += " concat str";
}
</pre>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-litelighter.js"></script>
<script type="text/javascript" src="js/jquery-litelighter-extra.js"></script>

<script type="text/javascript">

$(document).ready(function(){

// all you need to get started
$('pre').litelighter();

// toggle examples on/off
var on = true;
$('#toggleOnOff').click(function(e){
e.preventDefault();
if(on) $('pre.example').litelighter('disable');
else $('pre.example').litelighter('enable');
on = !on;
});

// toggle light to dark themes
var light = false;
$('#toggleLightDark').click(function(e){
e.preventDefault();
if(light) $('pre.example').litelighter('option','style','dark');
else $('pre.example').litelighter('option','style','light');
light = !light;
});
});
</script>
</body>
</html>

上一篇:创建docker公共仓库


下一篇:js 语法高亮插件之 Prism.js