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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
javascript Keycode对照表
Oct 24 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
javascript的事件描述
2006/09/08 Javascript
JS event使用方法详解
2008/04/28 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
js实现页面导航层级指示效果
2020/08/25 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
浅谈python中的占位符
2017/11/09 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Python中一些深不见底的“坑”
2019/06/12 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
python如何保存文本文件
2020/06/07 Python
python中如何写类
2020/06/29 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
岗位职责的含义
2013/11/17 职场文书
烹饪自我鉴定
2014/03/01 职场文书
会员活动策划方案
2014/08/19 职场文书
Python的三个重要函数详解
2022/01/18 Python