bootstrap中使用google prettify让代码高亮的方法


Posted in Javascript onOctober 21, 2016

利用google prettify 让代码高亮,好看。

下载地址:

 http://code.google.com/p/google-code-prettify/

http://www.bootcdn.cn/prettify/

网络引入地址: //cdn.bootcss.com/prettify/r298/prettify.min.js

效果图如下

bootstrap中使用google prettify让代码高亮的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<head> 
<!-- 新 Bootstrap 核心 CSS 文件 --> 
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
<link href="//cdn.bootcss.com/prettify/r298/prettify.min.css" rel="stylesheet"> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="//cdn.bootcss.com/prettify/r298/prettify.min.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>质量录入</title> 
</head> 
<body onload="prettyPrint()"> 
<form action="<%=basePath %>rest/wx" method="post"> 
<div class="container"> 
<h1 class="page-header">代码<small>google prettify代码高亮</small></h1> 
<p>Bootstrap是基于<code>HTML5</code>和<code>CSS3</code>开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。</p> 
<pre class="prettyprint linenums"> 
<div class="container"> 
<h1 class="page-header">列表<small>无序列表、有序列表、描述列表</small></h1> 
<h2>有序列表</h2> 
<ul> 
<li>开发</li> 
<li>运维</li> 
<li>需求</li> 
</ul> 
<h2>无序列表</h2> 
<ol> 
<li>JAVA</li> 
<li>PHP</li> 
<li>C#</li> 
</ol> 
<h2>描述列表</h2> 
<dl class="dl-horizontal"> 
<dt>JAVA</dt><dd>SUN公司的开发语言</dd> 
<dt>C#</dt><dd>Microsoft公司的语言</dd> 
</dl> 
</div> 
</pre> 
</div> 
</form> 
</body> 
</html>

以上所述是小编给大家介绍的bootstrap中使用google prettify让代码高亮的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
js Event对象的5种坐标
Sep 12 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
如何使用JavaScript实现栈与队列
Jun 24 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
BootStrap网页中代码显示用法详解
Oct 21 #Javascript
网页瀑布流布局jQuery实现代码
Oct 21 #Javascript
js运动事件函数详解
Oct 21 #Javascript
javascript轮播图算法
Oct 21 #Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 #Javascript
javascript简易画板开发
Apr 12 #Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 #Javascript
You might like
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
php生成mysql的数据字典
2016/07/07 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
详解JS函数防抖
2020/06/05 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
Python读写文件方法总结
2015/06/09 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
python使用requests.session模拟登录
2019/08/09 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Python2与Python3的区别详解
2020/02/09 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
Noon埃及:埃及在线购物
2019/11/26 全球购物
工作分析计划书
2014/04/30 职场文书
合作协议书范文
2014/08/20 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL