phoenixの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が自動的package.jsonにhighlight.jsの最新バージョンを追加することを、あなたはまた、そこに特定のバージョンを設定し、npm installを実行することができます。 インストールしたら、あなたはweb/static/app.js

import hljs from "highlight.js" 
hljs.initHighlightingOnLoad(); 

にライブラリをインポートして使用することができるプロセスは、使用する可能性のあるNPMパッケージでも同じです。 CSSファイルなどの非JSアセットは、NPMパッケージから自動的にインポートされません。したがって、brunch-config.jsのnpmセクションでホワイトリストを作成する必要があります。

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

もちろん、your preferred color schemeの名前でdefault.cssを交換してください。 NPMパッケージからスタイルを引き出す方法については、in the Brunch documentationを参照してください。