ノードと一緒にインストールされたPrismプラグインの使用方法

Question

私は自分のドキュメントを表示するためにプリズムを使用しています。そこで私はいくつかの美しいコードを表示するようになりました。プリズムをインストールするには、手動インストールまたはノードの2つの方法があります。 ノードを使用してインストールしました。 のみ利用例は次のとおりです：方法について説明なしドキュメントが存在しないそのプラグインを使用するが、その後

var code = "var data = 1;"; 
var html = Prism.highlight(code, Prism.languages.javascript); 

とhtmlを表示...私の場合 私は行番号を使用します。の仕方？あなたのHTML内

Answer 1

は、次のように作成します。

<pre class="line-numbers"><code id="formattedBlock" class="language-javascript"></code></pre> 

<link rel="stylesheet" href="themes/prism.css" /> 
<link rel="stylesheet" href="themes/plugins/prism-line-numbers.css" /> 

あなたはneccessaryライブラリを必要としていることを確認し、ヘッダーに関連したCSSファイルをインポートすることを忘れないでください

var Prism = require('prismjs/components/prism-core.min'); 
require('prismjs/components/prism-javascript.min'); 
require('prismjs/plugins/line-numbers/prism-line-numbers.min'); 

あなたが書いた例は正しいです：

var code = "var data = 1;"; 
var html = Prism.highlight(code, Prism.languages.javascript); 

フォーマットされたブロック要素にhtml結果を追加するだけです。 jQueryで：

$('#formattedBlock').append(html);