jQuery的 highlight.js 代码高亮插件的使用

最新推荐文章于 2024-06-06 09:53:57 发布

smile radiantly

最新推荐文章于 2024-06-06 09:53:57 发布

阅读量1.2k

点赞数

分类专栏：前端插件文章标签： jquery

本文链接：https://blog.csdn.net/zhixingwu/article/details/107377056

版权

前端插件专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在网页使用过程中，经常会用到代码的展示。而不同颜色的代码，可以让代码看起来更直观，也更美观。

1.官网

2.下载

首先，我们先到官网下载一个highlight的js文件。highlight.js 点击get version按钮进入语言选择，勾选你常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。通常common就足够用了。然后点击下面的download按钮，下载，解压，里面会有js文件和css文件。

打开里面的styles文件，里面有很多的css文件。这些文件可以更改你的展示代码的css样式，包括高亮的颜色和背景色(主题色)。在使用时想使用那种样式只需要导入这个样式的css文件即可。看不懂这些英文都代表的什么样式？这个网址有各个css文件的效果展示：highlight.js css demo

在使用时，在<pre><code></code></pre>标签里的代码块会自动高亮。如果你的代码里包含标签，记得将标签的"<“换成”&lt"，把">“换成”&gt"。

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"});都行，但实际上只能使用第一个，后一个不会生效。

参考

smile radiantly

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery的 highlight.js 代码高亮插件的使用

在网页使用过程中，经常会用到代码的展示。而不同颜色的代码，可以让代码看起来更直观，也更美观。1.官网highlight.jshighlight.js css demohighlight.js API2.下载首先，我们先到官网下载一个highlight的js文件。highlight.js 点击get version按钮进入语言选择，勾选你常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。通常common就足够用了。然后点击下面的download按钮，下载，解压，里面会有
复制链接

扫一扫

专栏目录