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监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
微信小程序实现九宫格抽奖
Apr 15 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
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解析html的实现代码
2011/08/08 PHP
php中smarty区域循环的方法
2015/06/11 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
javascript 实用的文字链提示框效果
2010/06/30 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
python操作sqlite的CRUD实例分析
2015/05/08 Python
python实现计算倒数的方法
2015/07/11 Python
Python选课系统开发程序
2016/09/02 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
Python 发送邮件方法总结
2020/08/10 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
什么造成了Java里面的异常
2016/04/24 面试题
进程的查看和调度分别使用什么命令
2013/12/14 面试题
留学自荐信的技巧
2013/10/17 职场文书
人资专员岗位职责
2014/04/04 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
乌镇导游词
2015/02/02 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL