在 webpack 构建后 Highlight.js 语法高亮不工作答案

【问题标题】：Highlight.js syntax highlighting not working after webpack build在 webpack 构建后 Highlight.js 语法高亮不工作
【发布时间】：2018-11-07 22:13:44
【问题描述】：

在使用webpack 之前，此代码在函数中运行，并在加载内容后运行：

$('pre code').each(function(i, block) {
    console.log("ta da!");
    hljs.highlightBlock(block);
});

console.log 消息出现，但未突出显示。

没有构建或控制台错误。

Highlight.js 版本

https://github.com/isagalaev/highlight.js/blob/master/src/highlight.js

Highlight.js 主题：

https://highlightjs.org/static/demo/styles/hybrid.css

Webpack 版本

"webpack": "^4.8.3"

my_entry_file.js

import '../css/hybrid.css'; 
import hljs from './highlight';

HTML 对比如下：

原始 HTML：

<pre>
<code class="javascript">// here is a comment

在生产站点上（不使用 webpack）：

<pre>
<code class="javascript hljs">
<span class="hljs-comment">
// here is a comment
</span>
<span class="hljs-keyword">var</span>.... etc

在开发网站上（使用 webpack）：

<pre>
<code class="javascript hljs">// here is a comment

【问题讨论】：

标签： webpack highlight.js

【解决方案1】：

我在发布时想出了答案，但认为该解决方案可能对某人有所帮助。

生产站点和开发站点之间的唯一异常是，在前者中，我使用的是以下位置的缩小文件：

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js

而开发网站（使用 webpack）正在使用：

https://github.com/isagalaev/highlight.js/blob/master/src/highlight.js

所以我切换回缩小版，语法突出显示工作。

我不知道为什么会这样。

【讨论】：