Implementing a PrismJS code viewer

Link : https://prismjs.com/

The PrismJS code syntax highligher+ is a great tool for presenting non-editable javascript, css, php, html, etc languages.

Prerequisites

Firstly, you need to create a download from prismjs.com including your chosen languages and preferences.Then include the files into your page

html

<script type='text/Javascript' src='js/myprism.js'></script>
<link href='css/myprism.css' rel='stylesheet'/>

Coding

Now you need the following

html  ::  in-line snippets

<code class='language-php'>if ( true ) {</code>

or

html  ::  multi-line snippets

<pre class='filename'>Optional Title text</pre>

<pre>
   <code class='language-javascript|language-php|language-css|....'>.....
   ....
   ...
   ..
   .
   </code>
</pre>

or ...

html  ::  multi-line with line-numbers

<pre class='line-numbers' data-start='$startLineN'>
   <code class='language-javascript|language-php|language-css|....'>.....
   ....
   ...
   ..
   .
   </code>
</pre>

if using ajax, where the code may not be presented after the prismjs onload applies, then you can use

js

Prism.highlightAll();

Note, to see line numbers - Prism.highlightAll(); must be called