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

Question

我使用了this，但是它有效，但感觉有点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的{​​{1}}部分将其列入白名单。

brunch-config.js

显然，将npm: { // ... keep the other settings styles: {"highlight.js": ['styles/default.css']} } 替换为your preferred color scheme的名称。有关从NPM包中提取样式的更多信息，请参见in the Brunch documentation。