bootstrap中使用google prettify让代码高亮的方法

利用google prettify 让代码高亮，好看。

下载地址：

http://code.google.com/p/google-code-prettify/

http://www.bootcdn.cn/prettify/

网络引入地址： //cdn.bootcss.com/prettify/r298/prettify.min.js

效果图如下

<!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="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://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让代码高亮的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • bootstrap中使用google prettify让代码高亮的方法

    bootstrap中使用google prettify让代码高亮的方法

    利用google prettify 让代码高亮,好看. 下载地址: http://code.google.com/p/google-code-prettify/ http://www.bootcdn.cn/prettify/ 网络引入地址: //cdn.bootcss.com/prettify/r298/prettify.min.js 效果图如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo

  • bootstrap中的导航条实例代码详解

    一.和导航的区别 1.导航条比导航多了一个条字 2.直接上图 导航: 导航条: 简单文字描述: 由两张图看出,导航内容比较简单,而导航条可以包含导航及其他元素,如表单,搜索框等,并且通常导航条会有一个区别于页面的背景色. 二.在页面中定义导航条 方法: 为父容器添加类名navbar navbar-default.navbar-default类用来规定导航条的颜色,可以更改为navbar-inverse来让导航条反色显示.bootstrap官网建议使用nav元素.但也常用div元素,建议用div元

  • 在react中使用highlight.js将页面上的代码高亮的方法

    通过 highlight.js 库实现对文章正文 HTML 中的代码元素自动添加语法高亮,highlight.js官方文档 下载highlight.js npm i highlight.js 导入highlight.js import hljs from 'highlight.js' import 'highlight.js/styles/vs2015.css'   用highlight.js   useEffect(() => {     // 配置 highlight.js     hljs

  • Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

    Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

    本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h

  • 关于ckeditor在bootstrap中modal中弹框无法输入的解决方法

    当在bootstrap的modal中使用ckeditor时,使用ckeditor中带弹框的功能时无法输入问题. 解决方法:在jquery和bootstrap加载之后引入fix的js,js内容: var $modalElement = this.$element; $(document).on('focusin.modal', function (e) { var $parent = $(e.target.parentNode); if ($modalElement[0] !== e.target

  • vue3引入highlight.js进行代码高亮的方法实例

    vue3引入highlight.js进行代码高亮的方法实例

    目录 背景描述: 一.安装依赖: 二.在vue3主入口main文件,对highlight进行引入和注册: 三.页面使用: 四.看下效果展示吧: 五.一些优化: 1.问题 2.解决方法 3. 处理后的效果 总结 背景描述: 在项目开发中,经常一些日志预览,还有文件的预览,需要进行代码高亮显示.这样可以让文本内容展示的时候显得更加友好,也便于阅读 效果类似markdown语法的代码高亮,如下: <TestPlan guiclass="TestPlanGui" testclass=&q

  • prettify 代码高亮着色器google出品

    在<head></head>标签之间加入这两行代码: 复制代码 代码如下: <link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"/> <script src="http://google-code-prettify.go

  • CKEditor中加入syntaxhighlighter代码高亮插件

    从官网 下载ckeditor,我下载的是CKEditor 3.3.1 .CKEditor与原来的FCKeditor有太大的不同了,作为开发人员,在做自己的博客的时候总是需要贴代码的,只好给它先做一个插入代码的插件了.高亮代码用的是"SyntaxHighlighter ". 1.在"ckeditor/plugins/"目录下新建一个"insertcode"目录,然后在"insertcode"目录下新建一个"plugin

  • BootStrap中Table隐藏后显示问题的实现代码

    BootStrap中Table隐藏后显示问题的实现代码

    开始的时候先把table隐藏了,由于判断条件让它显示,结果出现错位的问题. //前台代码: <h3 id="faultanalysis-head" class="text-center" style="display:none"><strong>faultanalysis-table</strong></h3> <table id="faultanalysis-table"

  • bootstrap中添加额外的图标实例代码

    bootstrap中添加额外的图标实例代码

    说明 可以针对校验状态为输入框添加额外的图标.只需设置相应的 .has-feedback 类并添加正确的图标即可 示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m

随机推荐