WordPress prismjs with Child Theme

  • 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)
<?php

// Function to add prism.css and prism.js to the site
function add_prism() {
// Register prism.css file
wp_register_style(
'prismCSS', // handle name for the style so we can register, de-register, etc.
get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file
);
// Register prism.js file
wp_register_script(
'prismJS', // handle name for the script so we can register, de-register, etc.
get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file
);
// Enqueue the registered style and script files
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');

?>

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">&lt;img src="/images/itsmetommy.png"&gt;</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">&lt;?php
phpinfo();
?&gt;
</code></pre>

output

<?php
phpinfo();
?>