Code Highlighting with Prism.js

Prism.js is a JavaScript library for syntax highlighting. Documentation is here: https://prismjs.com/plugins/line-numbers/

  • JavaScript

  • JavaScript with line #s

  • JavaScript with word-wrapping & line #s

JavaScript

The markup... 
<pre class="language-javascript">
<code>// Basic js
const arr = new Array(4).fill(true);</code>
</pre>
How it renders... 
// Basic js
const arr = new Array(4).fill(true);

JavaScript with line #s

Add line-numbers as a class to the outermost pre tag. That’s it.

The markup... 
<pre class="language-javascript line-numbers">
<code>var foo = 'test';
var x = 1;
x++;
// Here's a long comment: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt tortor ac rutrum efficitur. Duis a condimentum ex. Aenean ac gravida erat. 
</code></pre>
How it renders... 
var foo = 'test';
var x = 1;
x++;
// Here's a long comment: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt tortor ac rutrum efficitur. Duis a condimentum ex. Aenean ac gravida erat.

Start at a specific line #

The markup... 
<pre class="language-javascript line-numbers" data-start="4187">
<code>var x = 'wow, line 4187!';</code>
</pre>
How it renders... 
var x = 'wow, line 4187!';

JavaScript with word-wrapping & line #s

Add a style attribute to the code tag… <code style=”white-space:pre-wrap;”></code>. See below:

The markup... 
<pre class="language-javascript line-numbers">
<code style="white-space:pre-wrap">var foo = 'test';
var x = 1;
x++;
// Here's a long comment: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt tortor ac rutrum efficitur. Duis a condimentum ex. Aenean ac gravida erat. 
</code></pre>
How it renders... 
var foo = 'test';
var x = 1;
x++;
// Here's a long comment: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt tortor ac rutrum efficitur. Duis a condimentum ex. Aenean ac gravida erat.