如何在离线状态下实现基于highlight.js的github-dark主题语法高亮？

问题根源 #

当前编辑器仅能联网工作，是因为HighlightedCode.useTheme('github-dark')会在线拉取主题样式，同时编辑器内部会动态加载highlight.js核心库与对应语言的语法包——这些资源都需要本地化才能实现离线使用。

解决步骤 #

1. 下载本地所需资源 #

从highlight.js资源包中下载以下文件，放在和你的index.html、min.js同一目录下：

• highlight.min.js：highlight.js核心脚本
• github-dark.css：github-dark主题样式文件
• javascript.min.js：JavaScript语法支持包（若需其他语言，下载对应语法包即可）

2. 修改HTML代码，本地化引入资源 #

更新index.html，预先引入本地资源，避免在线请求：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 引入本地github-dark主题样式 -->
  <link rel="stylesheet" href="github-dark.css">
  <!-- 引入本地highlight.js核心 -->
  <script src="highlight.min.js"></script>
  <!-- 引入本地JavaScript语法包 -->
  <script src="javascript.min.js"></script>
  <style>
    textarea[is="highlighted-code"] {
      padding: 18px;
      width: 1200px;
    }
  </style>
  <script type="module">
    (async ({ chrome, netscape }) => {
      const { default: HighlightedCode } = await import('min.js');
      
      // 预先配置highlight.js，复用本地资源
      hljs.configure({
        classPrefix: ''
      });

      // 注释原在线主题加载逻辑，因为已通过link标签引入本地样式
      // HighlightedCode.useTheme('github-dark');
    })(self);
  </script>
</head>

<body>
  <textarea is="highlighted-code" cols="80" rows="12" language="javascript" tab-size="2" auto-height>

</textarea>

</body>

</html>

3. 调整min.js（按需操作） #

如果上述步骤后仍存在在线请求，打开你下载的min.js，搜索其中的远程资源链接（如unpkg的URL），将其替换为本地文件的相对路径。例如把https://unpkg.com/highlight.js@...替换为./highlight.min.js，主题链接替换为./github-dark.css。

4. 验证离线功能 #

断开网络连接，打开index.html，输入JavaScript代码，检查是否能正常显示语法高亮效果。

内容的提问来源于stack exchange，提问作者Neo