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 相关文章推荐
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
详解javascript replace高级用法
Feb 17 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
js模拟实现烟花特效
Mar 10 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 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
php实现分页显示
2015/11/03 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
javascript实现日历效果
2019/06/17 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
python先序遍历二叉树问题
2017/11/10 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
麦当劳辞职信范文
2014/01/18 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
高校教师自荐信范文
2014/03/13 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
Python实现天气查询软件
2021/06/07 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS