jQuery基于highlight.js代码着色高亮显示特效.zip

共6个文件

js：2个

css：2个

svg：1个

版权申诉

jquery代码

jquery特效

jquery插件

78 浏览量 2023-09-22 00:15:00 上传评论收藏 129KB ZIP 举报

《jQuery结合highlight.js实现代码高亮显示特效》在网页开发中，为了使代码更加易于阅读和理解，通常会采用代码高亮显示的方式。在这个专题里，我们将探讨如何利用jQuery库与highlight.js插件实现这一功能。jQuery是一个轻量级、高性能的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互等任务。而highlight.js则是一款强大的代码高亮库，支持多种编程语言的语法高亮。我们需要了解jQuery的基本用法。jQuery的核心是选择器，它允许我们方便地选取HTML元素。例如，`$("#myDiv")`会选择ID为"myDiv"的元素，`$(".myClass")`则会选择所有class为"myClass"的元素。在我们的项目中，jQuery将用于获取和操作需要高亮显示的代码块。接下来，我们要引入jQuery和highlight.js。在`index.html`文件中，确保添加了以下引用： ```html <script src="https://code.jquery.com/jquery-3.x.min.js"></script> <link rel="stylesheet" href="highlight.pack.css"> <script src="highlight.pack.js"></script> ``` 这里，我们使用了CDN链接获取jQuery库，同时引入了highlight.js的CSS和JS文件，用于样式和功能实现。然后，我们需要初始化highlight.js。在`js`文件夹中的JavaScript代码中，我们可以使用以下代码来实现： ```javascript $(document).ready(function() { $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); }); ``` 这段代码在文档加载完成后执行，遍历所有`<pre><code>`标签内的代码块，并应用highlight.js的高亮效果。为了使代码样式更符合网站主题，我们可以自定义highlight.js的样式。在`css`文件夹中，找到`highlight.pack.css`文件，或者创建一个新的CSS文件，然后覆盖或添加所需的样式。例如，改变代码块的背景颜色、字体大小和颜色等。此外，`img`文件夹可能包含了一些图标或者用于样式的图片资源，这取决于实际的项目需求。如果需要，你可以根据实际情况调整这些图片以适应整体设计。这个项目提供了一个实用的示例，展示了如何通过jQuery和highlight.js结合，实现网页代码的高亮显示。这不仅可以提升代码的可读性，也是开发者交流和分享代码时常见的做法。对于想要进一步优化的开发者，可以尝试添加更多自定义功能，如代码折叠、复制按钮等，以增强用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery基于highlight.js代码着色高亮显示特效.zip （6个子文件）

jquery.min.js 95KB

highlight.min.js 181KB

img

bg-1.svg 33KB

css

heightlength.css 150KB

mxjs.css 1KB

index.html 3KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery基于highlight.js代码着色高亮显示特效</title> <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/heightlength.css"> <link rel="stylesheet" href="css/mxjs.css"> </head> <body> <div class="container"> <div class="jsbg"> <div class="col-lg-12 mxlength"> <div class="mx-1"> <p>该高亮插件免费分享给大家，此高亮分布非常简单。</p> <p>更方便大家分享时，用高亮把代码显示出来，让大家简单易懂</p> <p><code>class="jsbg"</code>：简单复制下方代码，即可多次使用</p> <p><code>class="mx-1"</code>：目的是为了包裹，方便划分第几个！可自定义名称</p> <p> <code>code</code>：直接复制代码即可，注意大于号小于号<code><></code>!!部分编辑器会提示报错 <p><code>& gt;</code>：大于号 ></p> <p><code>& lt; </code>：小于号 <</p> </p> </div> </div> <div class="col-lg-12"> <pre class="mxScroll"> <code class="lang-javascript"> <div class="jsbg"> <div class="col-lg-12 mxlength"> <div class="mx-1"> <a href="">/</a> </div> </div> <div class="col-lg-12"> <pre> <code class="lang-javascript"> .xxoo{ width:100px } </code> </pre> </div> </div> </code> </pre> </div> </div> <div class="jsbg"> <div class="col-lg-12 mxlength"> <div class="mx-2"> <p>第二次</p> </div> </div> <div class="col-lg-12"> <pre class="Mxscroll"> <code class="lang-javascript"> .mx-2 { width:auto; height:auto } </code> </pre> </div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="https://www.lanrenzhijia.com/" target="_blank">懒人</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉