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 相关文章推荐
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
再探JavaScript作用域
Sep 24 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
jQuery实现滚动效果
Nov 17 jQuery
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
Vue 实现登录界面验证码功能
Jan 03 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
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
js实现表格字段排序
2014/02/19 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
python打开使用的方法
2019/09/30 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
税务干部鉴定材料
2014/02/11 职场文书
安全先进班组材料
2014/12/26 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL