在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的正確方法是什麼？

回答

相關問題