HTTPS наконец-то добрался до Blogger

В рамках программы HTTPS Everywhere Google все-таки добавила поддержку HTTPS для блогов, располагающихся на платформе Blogger (blogspot.com). Правда в первой версии, к сожалению, не поддерживаются блоги для которых используются персональные домены. Будем надеяться что благодаря стараниям разработчиков Google вскоре можно будет обойти и это ограничение.

Более подробно о поддержке HTTPS для блогов Blogger можно почитать в оригинальном посте Жо-эль-ван Бергена от 30.09.2015 - HTTPS support coming to Blogspot. О том как включить HTTPS для своего блога можно почитать здесь.

Правда как и говорилось, при использовании персонального домена подключить HTTPS пока нельзя:

Как отобразить QR Code со ссылкой на статью в Google Blogger?

В этом небольшом посте мы рассмотрим как вставить в шаблон Google Blogger отображение QR Code'а текущей открытой страницы. Собственно давно хотел реализовать у себя и помогли мне в этом эти две статьи:

1. Manually adding a Disqus gadget to Blogger
2. Как разместить QR-код на странице для печати

Из второй я узнал про сервис chart.googleapis.com, а из первой, скажем так, про возможность "манипулирования" контентом из JavaScript, ибо, напрямую нужный URL, а также переменную для определения текущего URL положения пользователя в шаблон Blogger схожу вставить не получилось. Поэтому и был применен JavaScript, как в первом примере.

Что нам потребуется? Добавить в дизайн блога HTML/JavaScript виджет и разместить его в нужном месте. После чего перейти в редактор HTML щаблона Google Blogger и заменить часть между <b:includable id='main'> и </b:includable> на следующую (сначала картинка, потом сам код):

Или в виде кода:

<b:widget id='HTML1' locked='false' title='QR Code' type='HTML'>
<b:includable id='main'>
<div align="center">
  <script type='text/javascript'>
 var blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
 var qr_code_url = 'http://chart.googleapis.com/chart?cht=qr&amp;chs=200x200&amp;choe=UTF-8&amp;chld=H&amp;chl=';
 var quote = '&quot;';
 document.write('<img src='+quote+qr_code_url+blogger_current_url+quote+'/>');
  </script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

По-быстрому вставить QR Code вместо тела виджета HTML у меня получилось только так. Т.к. у меня в блоге используется новый XML шаблон, то в нем надо использовать data:blog.canonicalUrl вместо <$BlogItemPermalinkURL$>. Ну и чтобы синтаксический анализатор платформы не ругался на кавычки, амперсанды и т.п., проще всего было сгенерировать соответствующий тег <img> динамически. Результат вы можете увидеть в моем блоге в правой колонке под счетчиком просмотров. 

Как вставить подсветку синтаксиса в шаблон Google Blogger?

Озадачился я тут вопросом как вставить подсветку синтаксиса в шаблон Google Blogger. Решение было найдено в виде highlight.js и Хостинг JavaScript-библиотек от Яндекс. В шаблон Google Blogger записываем следующие строки:

<!-- Code HighLight -->
<script src="http://yastatic.net/highlightjs/8.2/highlight.min.js"></script>
<link rel="stylesheet" href="http://yastatic.net/highlightjs/8.2/styles/github.min.css" />
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>

И наслаждаемся результатом, который при просмотре выглядит вот так:

Highlight.js, как и другие подобные скрипты, использует вариацию тега pre, но в данном случае вместе с тегом code, и автоматически понимает язык выкладываемого кода:

<pre><code>...</code></pre>

Т.е. весь код, в котором нужно выполнить подсветку синтаксиса необходимо размещать на месте троеточия, внутри обертки из pre и code.

p.s. Для примера, нижеследующий PHP-код в этом блоге, как раз подсвечивается с помощью highlight.js:

<?php phpinfo(); ?>

Красиво, читабельно, удобно. А главное - минимум трудозатрат, т.е. любой блоггер может добавить подсветку синтаксиса на страницы своего блога буквально в считанные минуты.