Каков правильный способ реализации highlight.js в phoenix?

Question

Я использовал this, и он работает, но он чувствует себя взломанным. Я попытался скопировать файл highlight.pack.js в web/static/js и вызвать его из файла .html.eex, но это просто дает мне ошибку. Я пробовал использовать CDN (он работал), но это не дало мне результатов, которые я хотел. Итак, каков правильный способ реализации highlight.js в phoenix v1.2.0. Я использую Earmark v1.0.1 для поддержки уценки, если это имеет значение.

Answer 1

Правильный путь, чтобы установить его с помощью НПМ:

$ npm install --save highlight.js 

Обратите внимание, что --save автоматически добавит последнюю версию highlight.js к package.json, вы также можете установить определенную версию там и запустить npm install. После установки, вы можете импортировать и использовать библиотеку в web/static/app.js

import hljs from "highlight.js" 
hljs.initHighlightingOnLoad(); 

процесс одинаков для любого пакета НПХ вы можете захотеть использовать. Активы, отличные от JS, такие как файлы CSS, автоматически не импортируются из пакетов NPM. Поэтому вам нужно добавить их в белый список в разделе npm в вашем brunch-config.js.

npm: { 
    // ... keep the other settings 
    styles: {"highlight.js": ['styles/default.css']} 
} 

Очевидно, что заменить default.css с именем your preferred color scheme. Более подробную информацию о вытягивании стилей из пакетов NPM можно найти in the Brunch documentation.