在 highlight.js 中设置主题模式（如深色/浅色切换）主要通过动态更换 CSS 主题文件实现。以下是具体方法：

highlight.js 本身不直接提供主题切换 API，但可以通过以下方式实现：

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

<link id="hljs-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dracula.min.css" disabled>

​3. 手动切换主题（通过按钮）​

<button onclick="switchTheme('light')">浅色模式</button>
<button onclick="switchTheme('dark')">深色模式</button>

<script>
function switchTheme(mode) {
  const themeLink = document.getElementById('hljs-theme');
  if (mode === 'dark') {
    themeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dracula.min.css';
    themeLink.disabled = false;
    // 可选：禁用其他主题
    document.querySelectorAll('link[href*="github"]').forEach(link => link.disabled = true);
  } else {
    themeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css';
    themeLink.disabled = false;
    document.querySelectorAll('link[href*="dracula"]').forEach(link => link.disabled = true);
  }
}
</script>

// 页面加载时检测系统主题
const systemThemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
switchTheme(systemThemeDark ? 'dark' : 'light');

// 监听系统主题变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  switchTheme(e.matches ? 'dark' : 'light');
});

<!DOCTYPE html>
<html>
<head>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  <script>hljs.highlightAll();</script>

  
  <link id="hljs-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dracula.min.css" disabled>
</head>
<body>
  <button onclick="switchTheme('light')">浅色</button>
  <button onclick="switchTheme('dark')">深色</button>

 <pre><code class="javascript">
    function hello() {
      console.log("主题切换成功！");
    }
  </code></pre>

  <script>
    function switchTheme(mode) {
      const themeLink = document.getElementById('hljs-theme');
      if (mode === 'dark') {
        themeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dracula.min.css';
        themeLink.disabled = false;
        document.querySelectorAll('link[href*="github"]').forEach(link => link.disabled = true);
      } else {
        themeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css';
        themeLink.disabled = false;
        document.querySelectorAll('link[href*="dracula"]').forEach(link => link.disabled = true);
      }
    }

    // 自动适配系统主题
    const systemThemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    switchTheme(systemThemeDark ? 'dark' : 'light');
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
      switchTheme(e.matches ? 'dark' : 'light');
    });
  </script>
</body>
</html>

通过上述方法，你可以轻松实现 highlight.js 的主题模式切换！

highlight设置主题的方法

前端开发工程

前端

highlight.js主题切换教程：详解如何实现代码高亮深色/浅色模式切换，包含动态CSS更换、系统主题适配和完整实现代码。通过JavaScript控制主题文件切换，支持手动/自动两种切换方式，提升代码展示体验。

highlight设置主题的方法

highlight设置主题的方法

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐