轻量级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">
内容:小括号用<和>代替;
</pre>
内容:
<!--This is a comment-->
<table>
<tr>
<th data-ptcolumn="description">Description</th>
<th data-ptcolumn="type">Type</th>
<th data-ptcolumn="purchased">Purchased</th>
<th data-ptcolumn="condition">Condition</th>
<th data-ptcolumn="modelnum">Model #</th>
<th data-ptcolumn="serialnum">Serial #</th>
<th data-ptcolumn="assignedto">Assigned To</th>
<th data-ptcolumn="lang">Language</th>
</tr>
</table>
</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">
<!--This is a comment-->
<table>
<tr>
<th data-ptcolumn="description">Description</th>
<th data-ptcolumn="type">Type</th>
<th data-ptcolumn="purchased">Purchased</th>
<th data-ptcolumn="condition">Condition</th>
<th data-ptcolumn="modelnum">Model #</th>
<th data-ptcolumn="serialnum">Serial #</th>
<th data-ptcolumn="assignedto">Assigned To</th>
<th data-ptcolumn="lang">Language</th>
</tr>
</table>
<style type="text/css">
body{ font-size: 12px; background-color: #005500; }
#myelement{
line-height: 22px;
font-size: 2em;
}
</style>
<script type="text/javascript">
/*
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})$/ );
}
}
</script></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<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>
轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。的更多相关文章
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- HelloDjango 第 09 篇：让博客支持 Markdown 语法和代码高亮
作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书 ...
- Markdown 语法和代码高亮
安装 Python Markdown 安装命令 pip install markdown 视图中渲染 Markdown blog/views.py import markdown from djang ...
- jquery提交form表单插件jquery.form.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)
这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...
- jquery二维码生成插件jquery.qrcode.js
插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...
- jquery 缓冲加载图片插件 jquery.lazyload
第一:加入jquery 第二:加入jquery.lazy.load.js文件 第三:在网页中加<script> $(document).ready(function(){ $(" ...
随机推荐
- React-Native学习系列(二) Image和ScrollView
接下来,我们接着(一)继续讲,今天我们学习的是Image组件和ScrollView组件. Image组件 Image:一个用于显示多种不同类型图片的React组件.那么要如何使用呢? 引入本地图片: ...
- .Net语言 APP开发平台——Smobiler学习日志：如何快速实现地图定位时的地点微调功能
Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 二.地点微调代码 VB: Dim ...
- 【转载】保哥 釐清 CLR、.NET、C#、Visual Studio、ASP.NET 各版本之間的關係
我常常不仅仅逛 博客园,还会去找国外,特别是台湾的技术部落格,发现好的文章,我便会收录,今天我转载或者全文复制,在Google 博客园,一位叫保哥, 釐清 CLR..NET.C#.Visual Stu ...
- 《连载 | 物联网框架ServerSuperIO教程》- 10.持续传输大块数据流的两种方式（如：文件）
1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...
- CodeSmith7 系列 破解教程
CodeSmith[点此下载] 学过三层的人应该认识CodeSmith Generator吧,今天我就跟大家一起探讨下CodeSmith Generator 7.0.2的激活,这最新版本破解的难度也是 ...
- Linux(十)___iptables防火墙
一.防火墙的作用 三.防火墙的分类 三.iptables基本语法: 表: 常用filter,nat用于地址映射转换. 配置文件: /etc/sysconfig/iptables 过滤表信息 . 查看i ...
- 【转】 iOS9.2-iOS9.3.3越狱插件清单
以下是iOS9.3.3越狱插件清单 原文地址:http://bbs.feng.com/read-htm-tid-10668605.html 序列 支持与否 插件名称 兼容版本 支持设备 1 是 20 ...
- Smart Tag——DevExpress WPF初探
Smart Tag是一个设计时扩展,所有标准控件均自带这个功能,当然也包括 DevExpress WPF Controls .可以快速设置控件的值或者绑定最重要的属性.它还可以帮助你完成一些重复的工作 ...
- MPAndroidChart 3.0——LineChart（折线图）
显示效果 MPAndroidChart每一种图表的基本使用方式都基本相同 了解一种图表的实现 参考项目源码其他的图表也就差不多哩 在布局文件中定义 <com.github.mikephil.ch ...
- Xcode7使用插件的简单方法&&以及怎样下载到更早版本的Xcode
Xcode7自2015年9上架以来也有段时间了, 使用Xcode7以及Xcode7.1\Xcode7.2的小伙伴会发现像VVDocumenter-Xcode\KSImageNamed-Xcode\HO ...