WordPress How to add color for code using prismjs. Useful for presenting Code with color.

  1. Download PrismJS from http://prismjs.com/ note: only choose language that you want to use or else your file is bigger and may be will slow your site.

2 . Download the JS and CSS do not click download from the top, it will reload the page again . scroll down to the bottom and you will see

3. once you download your prism.js and prism.css , we need to upload it to our theme directory which is at /yourwordpress/directory/wp-content/themes/yourthemehere

upload prism.js to /yourwordpress/directory/wp-content/themes/yourthemehere/
upload prism.css to /yourwordpress/directory/wp-content/themes/yourthemehere/
4. chown apache:apache /yourwordpress/directory/wp-content/themes/yourthemehere/prism.js
chown apache:apache /yourwordpress/directory/wp-content/themes/yourthemehere/prism.css
chmod 644 /yourwordpress/directory/wp-content/themes/yourthemehere/prism.js
chmod 644 /yourwordpress/directory/wp-content/themes/yourthemehere/prism.css

3. Edit your theme functions.php:

On the theme editor, click on “Theme Functions” and add this code:

Add it to the bottom of your function.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');

To use prism just edit your post with this at the beginning of html
example below we are using python highlighter.

<pre><code class="language-javascript">
enter your text here.
</code></pre>

Alternatively , We can Use Plugin , Which Is Call Prismatic.

https://wordpress.org/plugin/prismatic

To use prismatic see the screenshot below. Find the Button of Prismatic at your wordpress editor which is normally at Formatting Block.

Once you used it quite often it will be there in Most Used.

To use it press Prismatic button , once you add text , convert it to html and edit language to your choice language . example .

code class=”language-yourchoiceoflanguage”

source : https://crambler.com/how-to-implement-prism-js-syntax-highlighting-into-your-wordpress-site/

Leave a Reply