如何使用Highlight.js CDN来美化代码高亮显示？

Highlight.js是一款强大的Web代码高亮插件，支持自动检测编程语言并高亮显示，兼容各种框架。使用CDN链接可以方便地引入highlight.js及其主题，，，1. **引入CSS文件**：[https:// cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-dark.min.css](https://cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-dark.min.css)，，2. **引入JS文件**：[https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js](https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js)，，3. **初始化高亮**： hljs.initHighlightingOnLoad();，，通过以上步骤即可轻松实现 代码高亮功能。

1、CDN链接

cdnjs：https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css

jsdelivr：https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/default.min.css

unpkg：https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/default.min.css

2、基本使用

引入库文件和CSS文件

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
      <script>hljs.highlightAll();</script>

在需要高亮的代码外部使用<pre><code> Your code ... </code></pre> 标签包裹，highlight 会自动检测代码语言类型，并执行高亮操作，如果识别失败，可以在code 中手动添加语言类型的类名<code >...</code>。

3、自定义初始化

如果对高亮还有其他需求，可以进行初始化设置：

      $(document).ready(function() {
        $('pre code').each(function(i, block) {
          hljs.highlightBlock(block);
        });
      });

4、主题风格

highlight.js 提供了多种主题风格，可以根据个人偏好选择，solarized_light 风格和 sublime 主题风格等，具体样式可以在 highlight.js 官网查看。

highlight.js 是一个强大的语法高亮工具，通过简单的 CDN 链接即可轻松集成到网页中，提供丰富的主题选择和高度可定制的初始化设置，满足不同开发者的需求。

各位小伙伴们，我刚刚为大家分享了有关“highlightjs cdn”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！