3

プリズムを使用してドキュメントを表示しています。それで、私はいくつかの美しいコードを見せに行きました。プリズムをインストールするには、手動インストールまたはノードを使用する 2 つの方法があります。ノードを使用してインストールしました。しかし、そのプラグインを使用する方法を説明するドキュメントはありません。利用可能な唯一の例は次のとおりです。

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

そしてhtmlを表示します...私の場合、行番号を使用したいです。方法？

4

1 に答える 1

4

html で次を作成します。

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

ヘッダーに関連する CSS ファイルをインポートすることを忘れないでください

 <link rel="stylesheet" href="themes/prism.css" />
 <link rel="stylesheet" href="themes/plugins/prism-line-numbers.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);

たとえばjQueryを使用して、HTMLの結果をformattedBlock要素に追加するだけです：

$('#formattedBlock').append(html);
于 2016-06-09T12:09:24.523 に答える