如何使用highlight.js动态改变主题？

highlight.js是一个用于在网页上高亮显示代码的JavaScript库。它支持多种编程语言和主题，可以轻松地将代码块添加到网页中，并根据需要更改主题。

要使用highlight.js动态改变主题，可以按照以下步骤进行操作：

引入highlight.js库：在网页的<head>标签中添加以下代码，将highlight.js库引入到页面中。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/lib/highlight.min.js"></script>

初始化highlight.js：在网页的<script>标签中添加以下代码，初始化highlight.js。

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});

添加代码块：在网页的<body>标签中添加需要高亮显示的代码块。例如，要添加一个JavaScript代码块，可以使用以下代码：

<pre><code class="javascript">
function greet() {
  console.log('Hello, World!');
}
</code></pre>

更改主题：使用highlight.js提供的CSS类来更改主题。可以通过为<pre>标签添加不同的CSS类来更改主题。例如，要将主题更改为"monokai"，可以使用以下代码：

<pre class="hljs monokai"><code class="javascript">
function greet() {
  console.log('Hello, World!');
}
</code></pre>

在这个例子中，<pre>标签的class属性中添加了"hljs"和"monokai"两个CSS类，分别表示使用highlight.js和"monokai"主题。

动态改变主题：要动态改变主题，可以使用JavaScript来添加或移除CSS类。例如，可以创建一个按钮，并使用以下代码来切换主题：

<button onclick="changeTheme()">切换主题</button>

<script>
function changeTheme() {
  var preElements = document.querySelectorAll('pre');
  preElements.forEach((pre) => {
    pre.classList.toggle('monokai');
  });
}
</script>

在这个例子中，点击按钮时，changeTheme()函数会遍历所有的<pre>标签，并使用classList.toggle()方法来添加或移除"monokai"主题的CSS类。

以上就是使用highlight.js动态改变主题的步骤。通过引入highlight.js库、初始化highlight.js、添加代码块和使用CSS类来更改主题，可以实现在网页上动态改变代码块的高亮显示主题。

腾讯云相关产品和产品介绍链接地址：