Подсветка синтаксиса Highlight.js не работает после сборки веб-пакета - PullRequest
Новая
       31

Подсветка синтаксиса Highlight.js не работает после сборки веб-пакета

0 голосов
/ 29 мая 2018

Перед использованием 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

На сайте разработчика(используя веб-пакет): 

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

1 Ответ

0 голосов
/ 29 мая 2018

Я выяснил ответ во время публикации, но думаю, что решение может быть полезным для кого-то.

Единственная аномалия между рабочими сайтами и сайтами разработчиков заключается в том, что в первом случае я использовал минимизированный файл по адресу: 

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

, тогда как сайт разработчика (с помощью веб-пакета) использовал: 

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

Итак, я вернулся к минимизированной версии, и подсветка синтаксиса сработала.

Хотя я не знаю, почему это происходит.

...