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 tab 选项卡
Apr 26 Javascript
javascript 面向对象编程基础:继承
Aug 21 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
taro开发微信小程序的实践
May 21 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 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中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
用Python进行TCP网络编程的教程
2015/04/29 Python
Python lxml模块安装教程
2015/06/02 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
中科软测试工程师面试题
2012/06/16 面试题
自考生自我鉴定范文
2013/10/01 职场文书
亲子读书活动方案
2014/02/22 职场文书
《钱学森》听课反思
2014/03/01 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
高二英语教学反思
2016/03/03 职场文书