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 相关文章推荐
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
js实现时钟定时器
Mar 26 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
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
原生JS轮播图插件
2017/02/09 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
Python常用编译器原理及特点解析
2020/03/23 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
团队精神演讲稿
2013/12/31 职场文书
银行求职信
2014/05/31 职场文书
学校教研活动总结
2014/07/02 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android