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 相关文章推荐
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 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中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
django admin 添加自定义链接方式
2020/03/11 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
聊聊python中的异常嵌套
2020/09/01 Python
应届生自我鉴定
2013/12/11 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
兵马俑导游词
2015/02/02 职场文书
初中班长竞选稿
2015/11/20 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL