How to Beautify WordPress Code using Prism.js

How to Beautify WordPress Code using Prism.js
How to Beautify WordPress Code using Prism.js

Are you write lots of How to Articles with codes for your users?

But many times they are looking ugly.

How we tackle this problem?

Use Syntax Highlighter.

But,

Many popular plugins present in the market is very heavy weight and sometimes they are more than we need.

Huh, Have you any light weight option to beautify WordPress Code?

Check Prism.js.

There are many code highlighting or beautify plugin available so why I recommend this to you?

Because it’s very lightweight.

I’ve added files for highlighting five languages (Markup, CSS, C-like, JavaScript and PHP) and after gzip its only 7KB.

Are You Serious? Only 7KB?

Yes, My friends its lightest syntax highlighter available in the market and main feature added only those language which used in your blog tutorials or codes.

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.

So how you add it in your WordPress blog?

There are two ways to add it to WordPress.

How to add Prism.js Highlighter using Plugin

Easiest way to install anything in WordPress is to use a Plugin.

So Check download this plugin, developed by Simple Tutorial Blog.

   Download Prism Highlight

How to Install Prism Highlight in Blog

  1. Upload prism highlight to the /wp-content/plugins/ directory
  2. Activate the plugin through the Plugins menu in WordPress

How to use Prism Highlight in Post

  1. Switch your editor in text mode
  2. Text mode in WordPress
    Text mode in WordPress
  3. click on prism button.
  4. Add Prism code in Post
    Add Prism code in Post
  5. Its add <pre class="line-numbers"><code class="language-">
  6. Want to add language specific highlight, add language markup after language-.
  7. like <code class="language-css">
  8. Supporting markups
    • css
    • markup
    • php
    • javascript
  9. Click to prism to close code

Frequently Asked Question about Prism Highlight

#1. No code displayed on post?
Ans. Please parse your code using any html to xml parser, Use Postify to parse your code.

#2. How to remove line numbers?
Ans. Simple remove class="line-numbers" from <pre< field. After remove its look like <pre>.

#3. Why its support 5 languages only?
Ans. I want really light weight plugin, so its support only 5 languages.

Note:

I am still learning a WordPress, So you have some suggestion about Prism Highlight..

If yes please give me suggestion in comments box or direct mail your suggestion at [email protected].

How to Add Prismjs Manually in WordPress?

This tutorial use Child Theme but if you use parent theme all procedure is almost same.

  1. Go to Prism Download Page
  2. Choose what you want
  3. Download CSS and JS files
  4. Create prism folder in your child theme
  5. Add your Js and CSS file in newly created folder.
  6. Open Child Theme function.php
  7. Add Below Code
  8. // Function to add prism.css and prism.js to the site
    function add_prism() {
    // Register prism.css file
    wp_register_style(
    'prismstbCSS', // handle name for the style so we can register, de-register, etc.
    get_stylesheet_directory_uri() . '/prism/prism.css' // location of the prism.css file
    );
    // Register prism.js file
    wp_register_script(
    'prismstbJS', // handle name for the script so we can register, de-register, etc.
    get_stylesheet_directory_uri() . '/prism/prism.js' // location of the prism.js file
    );
    // Enqueue the registered style and script files
    wp_enqueue_style('prismstbCSS');
    wp_enqueue_script('prismstbJS');
    }
    add_action('wp_enqueue_scripts', 'add_prism');
  9. Now in Post write<pre><code class="language-yourpreferredlanguage"></code></pre>
  10. Change yourpreferredlanguage with your language. For eg. css or php.
  11. Dont forget to parse code before adding in text editor.

Find this article or plugin helps you?

Share it with your friends.

Thanks for using this plugin. If you use another plugin to beautify WordPress code, tell us in below comments.

Leave a Comment

18 Shares
Tweet
Share
+1
Share
Pin