您的位置：首页 > Web前端 > BootStrap

Bootstrap代码高亮样式

2014-02-12 22:19 573 查看

今天Twitter发布Bootstrap 2.0，修复了许多Bug，增加了不少新样式，同时Bootstrap的代码高亮也是一大亮点，与其他网站的代码高亮不同，淡淡的灰色调配上几个鲜艳而不刺眼的亮色点缀，相当漂亮，看了源码才知道，它是基于google-code-prettify的一套皮肤，于是我就决定把它搬到博客里来，下面是html、css、js的几个demo。

/*This is not code*/
#site-generator .sep {
background: url(images/wordpress.png) center left no-repeat;
color: transparent;
display: inline-block;
height: 16px;
line-height: 16px;
margin: 0 7px;
width: 16px;
}

/*This is not code*/
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title> imshanks | 我行我骕 </title>
<link rel="stylesheet" href="highlighter/prettify.css" />
</head>
<body>
<script src="highlighter/prettify.js"></script>
</body>
</html>

/*This is not code*/
$("#id").hover(function(){
alert("imshanks.com");
});

使用方法如下：

1）下载google-code-prettify

2）在head引入js和css文件

<link href="google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="google-code-prettify/prettify.js"></script>

3）在body加上onload=”prettyPrint()

<body onload="prettyPrint()">...</body>

如果你的主题里引入过Jquery.js，也可以加上下面这段代码

$(document).ready(function(){
prettyPrint();
})

设置方法如下

1）把代码放进

<pre>...</pre>

或者

<code>...</code>

就可以实行代码高亮了。你也可以指定一种语言，class=”prettyprint Lang-html”，在lang- 后添加以下任何一种语言。“bash”, “c”, “cc”, “cpp”, “cs”, “csh”, “cyc”, “cv”, “htm”, “html”, ”java”, “js”, “m”, “mxml”, “perl”, “pl”, “pm”, “py”,
“rb”, “sh”, ”xhtml”, “xml”, “xsl”

2）打开行号

你可以使用linenums打开行号

<pre class=”prettyprint linenums Lang-html”>

喜欢这套样式的童靴下载prettify.css替换就行了。

下面提供我改造的wordpress插件WP-Bootstrap-highlighting-of-code.rar用wordpress的童靴可以安装插件直接设置并使用。

（此插件原版为http://boliquan.com/wp-code-highlight/开发，本人只做了样式修改）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航