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 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
JS功能代码集锦
May 04 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 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+DBM的同学录程序(3)
2006/10/09 PHP
PHP 函数语法介绍一
2009/06/14 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
精彩的推荐信范文
2013/11/26 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
社区党支部承诺书
2015/04/29 职场文书
道歉的话语大全
2015/05/12 职场文书
离职证明范本
2015/06/12 职场文书
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL