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技术-屏蔽类
Aug 15 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
js实现3D图片展示效果
Mar 09 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
JavaScript实现网页留言板功能
Nov 23 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
python自动发送测试报告邮件功能的实现
2019/01/22 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
用python实现一个简单的验证码
2020/12/09 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
研究生毕业自我鉴定范文
2014/03/27 职场文书
教师年度考核评语
2014/04/28 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
运动会表扬稿范文
2015/05/05 职场文书
创业计划书之酒厂
2019/10/14 职场文书