How to add beautiful Code Snippet blocks on WordPress websites

If you are someone who just started or planning to start a Programming or related blog then this is for you. Sooner or later you will be writing a post that shares some piece of code with the users. Often that piece of code is long in width or height. It is then that you realize that it is energy consuming to read long lines of code. It quickly becomes annoying for the user and many users just give up.

You are not alone and there is a much better way to share the code snippets. Although WordPress does offer a built in Code block. However it is very basic and lacks some of the features that we will be covering. In this post I will share with you plugin that you can use with WordPress that will enhance the readability and presentation of the code blocks.

The WordPress plugin is called Prismatic. It offers many cool features. Some of them are listed below.

Features of using enhanced Code Snippet blocks

• Supports 50 coding languages
• Choose from all 8 available Prism themes
• Enable Line numbers
• Enable line highlight
• Displays the language of the code snippet
• Button to copy the code snippet
• Highlight single-line and multi-line code
• Integrated with the WordPress Post Code blocks menu
• Lightweight, fast and flexible

How to use it

Its very easy to install and use Prismatic. Follow the steps below.

[amazon_auto_links id=”529″]

2. At this point you should be able to see the Plugin menu appears in the WordPress left side panel under Settings > Prismatic. Click on this menu, it will take you to the Settings Page for Prismatic.

3. Under General Settings make sure that the Library field is set to Prism.js. Then click on Save Changes button.

4. Create a new WordPress Post and Click on the Add Block Button on the top left. From the Popup select Prismatic block.

5. Paste the following javascript snippet into that block.

function addNumbers(a, b) {
  var result = a + b;
  return result;
}

6. Next click on the block Options and from the Popup choose Edit as HTML as shown below.

7. Now you will have to inform the prismatic block about the kind of snippet that has been added. In this case it is javascript, so we will add class=”language-javascript” as shown below

8. At this point if you get the following message saying invalid content. Just click on the Convert to HTML button as shown below.

That is it! Click on the Preview button on the Top right corner of the post. It will open the post preview in the new tab and you should be able to see the results as shown below.

function addNumbers(a, b) {
  var result = a + b;
  return result;
}

Next Steps

The example that we made was with javascript. However, for other languages the process is the same. Refer to Prism.js for other supported languages.

Also on top of this, Prismatic also offers adding its own plugins for more advanced features. Checkout their available plugins.