Code block syntax highlighting is the best feature Feedly doesn’t offer, right? I guess you could just say that I got tired of my brain starting to produce syntax highlighting brain cells, so I decided I will take this into my own hands.

TL;DR: To enable syntax highlighting just install this chrome extension and paste this into your console on Feedly page, run and you’re done!

My first thought was, what if I create another RSS reader and add syntax highlighting to it, but that feels a bit of an overkill, doesn’t it? Then it hit me, what if there’s a chrome extension that helps me load some scripts into the page at load time? “To the google!”

*70s Batman transition animation*

Well color me brown and call me a coconut… There are tons of these extensions! After playing with some I decided to go with Custom JavaScript for websites, the reason for it was that it supports CDNs and custom JS code and it’s domain specific. I enabled jQuery through the extension and I added highlight.js as a CDN. Oh, why highlight.js, you ask? We use it on this blog and I like it, mkay? Let’s continue… Then I added a small chunk of custom code to init the highlight plugin every time I opened a post and there we go it works. Yay!

So I guess you want this for yourself as well, huh? Well OK, but don’t tell Feedly, I’m not sure they will like this… OK, so here we go! For Feedly Employees: If you are reading this please press ALT+F4!

1st Step: As a first step you will need to install the Custom JavaScript for websites chrome extension

2nd Step: Open CJS extension popup

CJS extension location

3rd Step: Make sure you have the proper URL in the top left dropdown, then in top right corner mark the checkbox which says enable CJS for this host and in dropdown that says nothing select jQuery

CJS popup

4th Step: Now click on the link that says your external scripts, which opens another popup where you can add script CDNs only. Replace those two lines with highlight.js CDN after that close the 2nd popup by clicking somewhere outside of the white box.

//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js

CJS popup in a popup

5th Step: Now we need to enter our custom code. As the first step, since CJS doesn’t support style CDN we need to manually inject a highlight.js theme. You can check the list of available themes here and you can see them in action on their main page. I decided to go with the default one.

$('head').append('<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/default.min.css">');

6th and Final Step: We need to add some code that calls highlight.js when the post opens so that it styles the pre code blocks.


// Since content is loading dynamically
// we can't bind to elements directly
$(document).click(function(event){
  // The reason why we split the "pre" and "code" selectors is that
  // some people are lazy and use "pre" elements without "code"
  var hljsSelector = 'pre';
  //We need to wait for the post to load, modify the timeout value
  // according to your needs
  setTimeout(function() {
    // Here we just check if there are any "pre" elements in the post
    if($(document).has(hljsSelector).length > 0) {
      // Here we create "pre code" selector and check if it exists,
      // if it does we change the hljsSelector otherwise we leave it
      var codeBlockSelector = hljsSelector + ' code';
      if($(document).has(codeBlockSelector).length > 0) {
        hljsSelector = codeBlockSelector;
      }
      // Finally we loop through all "pre" ("code") occurances in the post
      // and set their highlighting
      $(hljsSelector).each(function (i, block) {
        // One more note if the post doesnt have language specified
        // in its "pre" or "code" class, then highlight.js will use auto detect
        // and since that isn't 100% it might highlight the syntax
        // in wrong language
        hljs.highlightBlock(block);
      });
    }
  }, 200);
});

And after all these steps your CJS popup should look like this:

CJS coding done

Now let’s see this in action, try to find a post that has some syntax in it. If you have done everything correctly you should see this:

Feedly result

And that’s it you’re done…

Oh! Just one more thing, this extension uses local storage and if you for some reason cleared it, you can find the gist with the custom jQuery code and the CDN over here. Also, if you are clearing your local storage a lot I prepared a gist which automatically creates an insertion needed for this code to be automatically added, you can find this gist over here. Just remember to run that code on Feedly page.

Now that’s really it… You are welcome!

Nace Logar

Nace Logar

WEBPAGE: https://thecodedestroyer.com

My name is Nace, pronounced 'Natse' I started as a windows desktop developer. Later on I became web developer working primarily on web pages and business web applications where I actually fell in love with Front-End Technology.

View Comments