Saturday, January 16, 2016

Using any JQuery plugin in Blogger (Blogspot). for example, code Highlighting, Highlight.js

12:13 PM Posted by Elie Obeid
In order to enable any JQuery Library, you have to edit your theme, if you want to enable it globally, or the HTML of your post, if you just want to enable it on 1 page . This example will show you how enable Highlightjs on your blogger blog, this will work on any other platform/CMS.

On this page you can see that you have two options, using CloudFlare or Jsdeliver CDN. I used Jsdeliver, personal preference, choose anyone of them, perhaps my choice is a bit faster, i guess, perhaps I feel that way.

Notice that the CSS is missing the ending tag, so add it like so, otherwise, bloger will give you a warning

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/dark.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>


Add those in every post you wish to enable highlighting or in the template, I added the first two in the template, line 23, and I don't want to call it by default on every page, so I created in the template a variable code, my template looks like this

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/railscasts.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>

<script> var code = hljs.initHighlightingOnLoad();</script>

And now when I want to code I type, in HTML

<script> code();</script>
<pre><code class="python">
mycode ................
</code> </pre>

 And the result is

@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''

I'm using the railscasts theme, for now, if you want another theme refer to the demo page, theme names should be written in lowercase, if the theme name is composed of two words, like Github Gist, it should be written as github-gist.

  • For Mathjax, another blog discusses how to use it, or you could refer to the docs I don't want to copy paste, I like to enable Mathjax when needed because I don't use it that much, so not in the template. If I need to type many equations I'd rather use Sharelatex and embed the document in the blog.