在网页使用过程中,经常会用到代码的展示。而不同颜色的代码,可以让代码看起来更直观,也更美观。
1.官网
- highlight.js
- highlight.js css demo
- highlight.js API
2.下载
首先,我们先到官网下载一个highlight的js文件。highlight.js 点击get version按钮进入语言选择,勾选你常用的语言,在使用插件时会自动检测你要展示的代码的语言,并自动让代码高亮。通常common就足够用了。然后点击下面的download按钮,下载,解压,里面会有js文件和css文件。
打开里面的styles文件,里面有很多的css文件。这些文件可以更改你的展示代码的css样式,包括高亮的颜色和背景色(主题色)。在使用时想使用那种样式只需要导入这个样式的css文件即可。看不懂这些英文都代表的什么样式?这个网址有各个css文件的效果展示:highlight.js css demo
在使用时,在<pre><code></code></pre>
标签里的代码块会自动高亮。如果你的代码里包含标签,记得将标签的"<“换成”<",把">“换成”>"。
3.highlight使用
可以在 highlight.js API 上进行查看相关API的使用。
3.1加载js
在head中加载jquery.js和jquery.highlight.js,
<script src="./jquery-1.9.1/jquery.js"></script>
<script src="./jquery.highlight.js"></script>
3.2设置高亮css及触发高亮
在css中或通过jquery指定高亮区域的颜色:
.highlight {background-color: #FFFF88; }
或
$(".highlight").css({ backgroundColor: "#FFFF88" });
触发高亮:
//高亮显示所有td标签中的“hello”
$("td").highlight("hello");
3.3示例代码
<!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>test</title> <script src="./jquery-1.9.1/jquery.js"></script><script src="./jquery.highlight.js"></script> <style> .highlight{background-color: #FFFF88;} </style> <script language="JavaScript">$(document).ready(function () {$('td').highlight("name");$('td').highlight("hello");});</script> </head> <body> <table style="width:100%"><tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Evename</td><td>Jackson</td><td>94 hello</td></tr></table> </body>
</html>
4.注意
$('td').highlight("name");
必须放到 document.ready的函数中才能生效,当然也可以放到其它函数,在需要的时候再调用。
该插件可以高亮单词、语句,但不能同时高亮多个单词。可以通过重复该语句解决,比如$('td').highlight("word1"); $('td').highlight("word2");
按理来说用<style> .highlight{background-color: #FFFF88;} </style>
和$(".highlight").css({backgroundColor: "#FFFF88"});
都行,但实际上只能使用第一个,后一个不会生效。
参考
- jquery-highlight在web页面让字符高亮显示
- 实现文字高亮功能的两种解决方案(Javascript/Jquery)
- jQuery的highlight插件使用示例
- highlight.js 代码高亮插件的使用