Code callouts on blogger

🕥 3 min.

Why a code callout component ?

I spent quite some time to make my previous article readable. This article contains a long code extract which is quite unusual because it deals with java code generation. It requires a lot of explanations. Thus, I searched for a code callout component that is compatible with github gists.

Code callout component

I came by this component by Dave Leeds. It is brillant !
It allows to put links in the text to highlight lines in a gist snippet or other format snippets. The links are well integrated in your template comparing to some other tools that generate both the text and the snippet. See the extract of the article below

It highlights lines or separated group of lines. When you click the link to the line, it scrolls to the line in the gist and opens a popup with a personalized message and a button to scroll back to the text. See below

The separation between the link and the popup message allows to stay concise in the explanation text and give more details in the popup next to the code. See below

I will not explain how to use this component because it is already explained in the README file in the github repo but I will rather focus on the integration with blogger

Integration with blogger

After a quick change to the jquery selector, the component worked like a charm with the new github gist format. Where it is more complicated is with the integration with blogger. To work, the component requires several things:

• The jquery lib import: this one could be added to the HTML code of the blogger template. In the head section paste:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

• The code callout script import: the script is not hosted in any CDN, so you need to copy the minified code of the script available in dist directory of the repo to blogger. Adding this code to the HTML code of the template fails because blogger HTML editor refuses to take it. It might be a bug of the blogger editor. Adding it to a custom javascript gadget in the blogger layout also fails because the added gadget might not be rendered in mobile devices, so the script will not be called and the callout component will not work. The only way I found (might not be the best) is to paste the code of the script to a script tag at the end of the article that uses it.
• The call to the method that parses callout links in the article: right after the script of code callout (see previous step), paste 

<script>
    $(".callout-trigger").codeCallout({ profile: "gist" });
</script>

• Your links to code lines: see the README in the repo to learn what attributes you need to add to your links and to your gists to make it work.

Enjoy !