在phoenix中实现highlight.js的正确方法是什么？

我已经使用this，它的工作原理，但它感觉有点哈克。我试过将highlight.pack.js文件复制到web/static/js并从.html.eex文件中调用它，但这只是给我一个错误。我试过使用CDN（它工作），但没有给我我想要的结果。那么在phoenix v1.2.0中实现highlight.js的正确方法是什么？如果有问题，我正在使用Earmark v1.0.1进行降价支持。在phoenix中实现highlight.js的正确方法是什么？

来源

2016-12-16 Zharko Cekovski

这个http://www.phoenixframework.org/docs/static-assets#section-javascript-libraries有帮助吗？很难说出你在这里要求的是什么 - 你得到的错误是什么？ –

正确的方法是通过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部分将其列入白名单。

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

显然，随着your preferred color scheme名称替换default.css。有关从NPM包中提取样式的更多信息，请参见in the Brunch documentation。

来源

2016-12-16 16:17:41

谢谢，这个答案帮助我理解这是如何工作的。 –

在phoenix中实现highlight.js的正确方法是什么？

回答

相关问题