js使用highlight.js高亮你的代码

【highlight.js】是一款流行的代码高亮库，它能够自动识别并美化多种编程语言的代码片段，使得代码在网页上展示时更加清晰易读。本文主要介绍如何使用`highlight.js`在JavaScript环境中为代码添加高亮效果。 为了使用`highlight.js`，你需要在HTML文件中引入库的CSS样式文件和JavaScript文件。通常，你可以通过CDN（内容分发网络）来获取这些资源，例如使用Bootstrap CDN提供的链接： ```html <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> ``` 这里的`monokai_sublime.min.css`是预设的一种风格，你可以根据需求在`highlight.js`的官方Demo页面（https://highlightjs.org/static/demo/）中选择你喜欢的主题。 然后，为了激活代码高亮功能，你可以在页面加载完成后调用`hljs.initHighlightingOnLoad()`函数。这个函数会遍历页面中的所有代码块(`<pre><code>...</code></pre>`标签)并进行高亮处理。 ```html <script> hljs.initHighlightingOnLoad(); </script> ``` 在实际的Web开发中，如果你的项目使用了`require.js`管理依赖，你需要将`highlight.js`集成到AMD模块系统中。为此，你需要在`require.config`中配置`highlight.js`的路径，并通过`require`函数来加载： ```javascript require.config({ paths: { 'highlight': 'http://cdn.bootcss.com/highlight.js/8.0/highlight.min' } }); require(['highlight'], function(hljs) { hljs.initHighlightingOnLoad(); }); ``` 当你的项目使用AngularJS框架时，可能需要在适当的时间点（比如在`ngView`加载完成后）执行高亮操作。你可以创建一个自定义指令来实现这一点： ```javascript angular.module('yourApp').directive('highlightCode', ['$timeout', function($timeout) { return { restrict: 'A', link: function(scope, element) { $timeout(function() { hljs.highlightBlock(element[0]); }); } }; }]); ``` 接着，在需要高亮的代码块上添加`highlight-code`指令： ```html <pre><code class="javascript" highlight-code> // Your code here </code></pre> ``` 这样做可以使`highlight.js`在AngularJS完成DOM渲染后执行，避免因DOM未准备好导致的高亮失败问题。 需要注意的是，`highlight.js`默认支持多种编程语言，但并非所有的编程语言都自动启用。如果你需要高亮某种特定语言的代码，比如Swift，需要在HTML代码中指定语言类名，如`class="swift"`。对于不支持的语言，`highlight.js`会尝试进行最佳猜测，或者显示为纯文本。 `highlight.js`是一款强大的代码高亮工具，它能轻松地与各种前端框架和模块化系统集成，提升代码在网页上的展示效果。只需简单的配置和调用，就能让你的代码高亮起来，让读者更容易理解你的代码示例。