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判断两个时间大小的示例代码
Jan 28 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
js实现删除json中指定的元素
Sep 22 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
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性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
使用php计算排列组合的方法
2013/11/13 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python csv文件记录流程代码解析
2020/07/16 Python
自考生毕业自我鉴定
2013/10/10 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
档案接收函范文
2014/01/10 职场文书
工程招投标邀请书
2014/01/30 职场文书
怎么写自荐书范文
2014/02/12 职场文书
学校评语大全
2014/05/06 职场文书
环保建议书400字
2014/05/14 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
班级课外活动总结
2014/07/09 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
微观世界观后感
2015/06/10 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
Python turtle编写简单的球类小游戏
2022/03/31 Python