Replace the Rouge highlighter with Prism.js in Jekyll

By default Jekyll 3, ships with Rouge syntax highlighter. But for some reasons you may want to replace it with Prism.js syntax highlighter. Prism.js is a very lightweight JavaScript library to provide code highlighting on websites. In this article I will show you how to set up it on Jekyll-based website.

Disable the Rouge - Jekyll's default syntax highlighter

By default Jekyll version 3, ships with Rouge syntax highlighter. For some reason, you may want to disable it. For example, if you replace the built-in Rouge to another syntax highlighter such as Prism.js or your own custom highlighter.

Fixing the Jekyll + GitHub Metadata warning

We can set up a local version of our Jekyll GitHub Pages website to preview our website before making the changes public. But when I run the jekyll serve command it throws the following error message:

GitHub Metadata: No GitHub API authentication could be found. Some fields may be missing or have incorrect data.

Syntax Highlighting in Jekyll

Jekyll has built in support for Syntax Highlighting of over 100 languages. You can have code snippets highlighted so that they are easier to read on your GitHub Pages website. In this post I will show you how you can integrate Rouge into your Jekyll setup.

Integrate Flatr button to Jekyll website

Flattr is a free and easy way to earn money from blog posts. My Github hosted Jekyll website is being used primarily as a blog as you can see. By placing a small Flattr button at the end of each blog post, just above the comments section, I can ensure that visitors of my blog have an opportunity to thank me for the article. In this article, I will show you how to easily use Flattr to show “Thanks” button in Jekyll.