Javascript plugins for Blogspot

I've just finished with some interface tuning here. I generally like when some piece of work looks nice at the end of the day. Blogspot have some problems here, though. First, it doesn't offer nice fonts (well, it have a few, but with no support for cyrillic). Second, adding a source code syntax highlighter requires manually editing the source code of the template, which is not so fun and have a sad consequence that changes get lost every time I switch the template.

Luckily, there is a clean and portable way to solve my problems without the need to edit the template at all. Here is the recipe:

• Open blog setting and go to the "Design" tab.
• Choose a block to add new gadget to. In some cases a block from the top of the page is preferable and in some cases it is better to choose one from the bottom, but in most cases it den's matter so much.
• Click the "add gadget" link.
• Choose "HTML/Javascript" in the pop-up
• Enter any XHTML code, containing CSS and Javascript (enclosed into style and script tags) and hit the "save" button.

As far, as I can understand, the main aim of gadgets like that is to allow to include some arbitrary data or images from outside, like my USD/RUB graph (which is simply fetched from the site of the Central Bank of Russia via javascript). One can put there any HTML, containing arbitrary javascript and CSS which allows to do almost anything with the page. For example, one can add custom font or a source code syntax highlighting. Let's start with the font.

The most popular web fonts collection on the internet it the Google Fonts. I've just chose a font of my choice, copied the code snippet which google created for me and pasted it into the gadget:

<style>
  @import url(https://fonts.googleapis.com/css?family=Didact+Gothic&subset=latin,cyrillic);
  .blog-posts {
    font-family: 'Didact Gothic', sans-serif;
  }
</style>

The "@import" statement is the code from the Google Fonts, it just makes the font accessible for the page. The block below is a CSS style, which applies the font to blog postings. There is a big probability of that when I switch the template I will also have to apply the font the another class. Well, even if it is the case, it is going to be much easier then going to the google fonts again, finding the font one more time and changing the template's source code. Changing contents of a widget is a breeze.

Adding a source code highlighter this way is not any harder. I used the Prism and the free open-source CDN jsDelivr:

<script src='https://cdn.jsdelivr.net/g/prism@1.4.1(prism.js+components/prism-java.min.js+components/prism-python.min.js+components/prism-bash.min.js)'></script>
<style>
  @import url("https://cdn.jsdelivr.net/g/prism@1.4.1(themes/prism.css+themes/prism-okaidia.css)");
  .token.operator {
    background: inherit;
  }
</style>

Again, not only this adds Javascript and CSS to the page, but it also fixes a style.

And that's all for now.