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

Question

我用过 this ，它可以工作，但感觉有点hacky。我试过复制 highlight.pack.js文件到 web/static/js并从 .html.eex 调用它文件，但这只会给我一个错误。我试过使用 CDN(它有效)，但这并没有给我想要的结果。那么在 phoenix v1.2.0 中实现 highlight.js 的正确方法是什么？如果重要的话，我正在使用 Earmark v1.0.1 进行 Markdown 支持。

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 Assets ，例如 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 .