CODEWITHSUNDEEP
javascriptnode.jsprism.js
Meryam
Meryam

Reputation: 73

How to use Prism plugins installed with node

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?

Upvotes: 3

Views: 3697

Answers (1)

Rómeó Nagy
Rómeó Nagy

Reputation: 147

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 e.g. with jQuery:

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

Upvotes: 4

Related Questions