如何使用与节点一起安装的Prism插件

Question

I'm using prism to show my documentation. So there I went to show some beautiful code. To install prism there is two ways: manual install, or with node. I used node to install it. But to use its plugins there is no doc that explain how: the only available example is:

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

and then show the html... in my case I want to use the line numbers. How to?

Answer 1

In your html create the following:

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

Do not forget to import related CSS files in the header

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

Make sure you require the neccessary libraries

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

After what example you wrote is correct:

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

Just append the html result into formattedBlock element eg with jQuery:

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