• Step 1: Go to http://prismjs.com/download.html
• Step 2: Select your theme and languages
• Step 3: Download JS and CSS files (bottom of the page)
• Step 4: Upload files into child theme folder
• Step 5: Update funtions.php with the below code
• Step 6: Apply css <pre> and <code> class (see below examples)

<pre class="line-numbers"><code class="language-css">pre {
 border: 1px solid #d1d1d1;
 font-size: 16px;
 font-size: 1rem;
 line-height: 1.3125;
 margin: 0 0 1.75em;
 max-width: 100%;
 overflow: auto;
 padding: 1.75em;
 white-space: pre;
 white-space: pre-wrap;
 word-wrap: break-word;
 background: #272822;
 color: #f8f8f2;
 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}</code></pre>

I ended up having to update the background color to match the prismjs color, along with the paragraph margin spacing within the child-theme style.css file.

/* Update color to match prismjs background */ code, hr { background-color: #272822 !important; /* Make sure color schemes don't affect to print */ } p { margin: 0 0 20px; }

Examples

javascript

input

<pre class="line-numbers"><code class="language-javascript">var myObject = {
property1: "something",
property2: 5,
property3: true
};</code></pre>

output

var myObject = {
property1: "something",
property2: 5,
property3: true
};

bash

input

<pre class="line-numbers"><code class="language-bash">#!/bin/bash 
count=99 
if [ $count -eq 100 ] 
then   
   echo "Count is 100" 
else   
   echo "Count is not 100" 
fi
</code></pre>

output

#!/bin/bash 
count=99 
if [ $count -eq 100 ] 
then 
 echo "Count is 100" 
else 
 echo "Count is not 100" 
fi

html

input

<pre class="line-numbers"><code class="language-markup"><img src="/images/itsmetommy.png"></code></pre>

output

<img src="/images/itsmetommy.png">

css

input

<pre class="line-numbers"><code class="language-css">pre {
 border: 1px solid #d1d1d1;
 font-size: 16px;
 font-size: 1rem;
 line-height: 1.3125;
 margin: 0 0 1.75em;
 max-width: 100%;
 overflow: auto;
 padding: 1.75em;
 white-space: pre;
 white-space: pre-wrap;
 word-wrap: break-word;
 background: #272822;
 color: #f8f8f2;
 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}</code></pre>

output

pre {
 border: 1px solid #d1d1d1;
 font-size: 16px;
 font-size: 1rem;
 line-height: 1.3125;
 margin: 0 0 1.75em;
 max-width: 100%;
 overflow: auto;
 padding: 1.75em;
 white-space: pre;
 white-space: pre-wrap;
 word-wrap: break-word;
 background: #272822;
 color: #f8f8f2;
 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}

php

input

<pre class="line-numbers"><code class="language-php"><?php
phpinfo();
?>
</code></pre>

output

<?php
phpinfo();
?>