在使用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
在生产网站上(不使用网络包):
<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
答案 0 :(得分:0)
我在发布时想出了答案,但认为解决方案可能对某人有帮助。
生产和开发站点之间唯一的异常,就是前者我在使用缩小文件:
https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js
虽然dev网站(使用webpack)正在使用:
https://github.com/isagalaev/highlight.js/blob/master/src/highlight.js
所以我切换回缩小版本,语法高亮显示工作。
我不知道为什么会这样。