Highlight Code Snippets Dynamically with PrismJs and jQuery

On TeckStack, previously we were using PrismJs WordPress plugin to highlight all the code snippets which was great but we had to add custom fields for each code snippet we want to highlight. Then we have to pass ID of that custom fields as a shortcode attribute. In short, it it was tedious job...

Finally we decided to imtegrate PrismJs without any plugin to make it work with Jetpack Markdown module.

Writing Code in Markdown Style

TL;DR, Markdown Quick Reference.


    code here...



// checking IF Prism script and Code tags are available before initiating Prismjs
var $code = $('code'),
totalCodeBlocks = $code.length;

$code.each(function () {
    // getting class values of each code tag 
    var getCodeClass = $(this).attr('class');

    // updating class to work with Prismjs
    $("code."+getCodeClass).removeClass(getCodeClass).addClass("language-" + getCodeClass);
Inspired by:

Posting Code Blocks on a WordPress Site