在凤凰城实现highlight.js的正确方法是什么？

Question

我用过这个,它有效,但感觉有点hacky.我已经尝试将highlight.pack.js文件复制到文件web/static/js并从.html.eex文件中调用它,但这只是给了我一个错误.我尝试过使用CDN(它有效),但这并没有给我我想要的结果.那么在phoenix v1.2.0中实现highlight.js的正确方法是什么呢？如果重要的话,我正在使用Earmark v1.0.1进行降价支持.

Answer 1

正确的方法是通过NPM安装它:

$ npm install --save highlight.js

注意,--save会自动添加最新版本的highlight.js package.json,您也可以在那里设置特定版本并运行npm install.安装后,您可以导入和使用库web/static/app.js

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

对于您可能想要使用的任何NPM包,该过程都是相同的.非JS资产(例如CSS文件)不会自动从NPM包导入.因此,您需要npm在您的部分中将它们列入白名单brunch-config.js.

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

显然,请替换default.css为您首选配色方案的名称.有关从NPM包中提取样式的更多信息,请参阅Brunch文档.