Javascript-плагины для blogspot

Я немного повозился с настройками внешнего вида своего блога. Вообще, мне нравится, когда что-то в итоге выглядит прилично, но у этой платформы (blogger.com) есть пара серьёзных проблем. Во-первых, у них в настройках нет нормальных шрифтов (есть парочка, но в них нет кириллицы). Во-вторых, чтобы добавить подсветку синтаксиса для программного кода, нужно редактировать шаблон, что неприятно и неудобно по ряду причин: у меня нет никакого желания изучать их синтаксис, изменения теряются, когда меняешь шаблон, всё такое.

К счастью, на самом деле есть одно решение для обеих этих проблем: это возможность создания собственных "гаджетов".

• В настройках блога выбираем "Дизайн"
• Выбираем блок, в который не жалко добавить невидимый гаджет. В зависимости от цели можно предпочесть блок из верхней части страницы или из нижней.
• Нажимаем "Добавить гаджет"
• В появившемся окне выбираем "HTML/JavaScript"
• В окне настроек пишем XHTML-код того, что нам нужно добавить, и сохраняем.

По задумке авторов, основная цель подобных виджетов – это добавление всяких картинок вроде моего графика курса доллара (он вытаскивается с сайта Центробанка России). Туда можно написать любой javascript и любой html, что позволяет вытащить не только график, но и любой другой контент, и не только показать картинку, но и изменить стили, например. Со стилей и начнём.

Самая популярная в интернете коллекция web-шрифтов – это Google Fonts. Выбираем там шрифт по вкусу, копируем html-код, который сам google любезно предлагает, и пишем свой гаджет:

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

Первая строка предложена сервисом, она просто делает шрифт доступным, вторая строка применяет шрифт ко всему тексту, относящемуся к блог-постам. Теоретически, можно ожидать, что при изменении шаблона изменится название стиля, к которому нужно применять шрифт. Возможно это и так, но во всяком случае изменить потом содержание этого "гаджета" намного проще, чем заново искать шрифт на google fonts и редактировать исходники шаблона.

Аналогично, добавляем подсветку синтаксиса программного когда, используем Prism и бесплатный 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>

Здесь я не только добавил необходимые Javascript и CSS-файлы на страницу, но и немного поправил стиль.

Вроде, всё.