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 相关文章推荐
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 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+MSSQL分页的例子
2006/10/09 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
document.execCommand()的用法小结
2014/01/08 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
js面向对象的写法
2016/02/19 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
JS常见算法详解
2017/02/28 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
python中time库的实例使用方法
2019/10/31 Python
Python解析json代码实例解析
2019/11/25 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
大学生简历的个人自我评价
2013/12/04 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
工程建设实施方案
2014/03/14 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
zabbix配置nginx监控的实现
2022/05/25 Servers