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

Question

我用过 this，它确实有效，但感觉有点老套。我试过将 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 包中导入。因此，您需要在 brunch-config.js.

的 npm 部分将它们列入白名单

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

显然，将 default.css 替换为 your preferred color scheme. More information on pulling styles from NPM packages can be found in the Brunch documentation 的名称。

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

What's the proper way to implement highlight.js in phoenix?

elixir

highlight.js

phoenix-framework