Подключение скриптов и стилей

Не так, чтобы это было крайне необходимо, но неуёмная тяга к прекрасному заставила меня сотворить некоторые усовершенствования и без того очень гибкой блог–платформы Blogger от Google, где мы сейчас, собственно, и присутствуем. Дело в том, что по ходу повествования о своём тернистом пути к возрождению незаслуженно заброшенного сайта, мне предстоит публиковать какие–то фрагменты скриптов и стилей, и хотелось бы делать это так, чтобы это радовало глаз почтенного читателя.

С помощью всё того же Гугла разыскал я JQuery–библиотеку под названием плагин JQuery Sintax Highlight для «красивизации» кодов, написанных на различных языках программирования (мне могут потребоваться Javascript, CSS, PHP и SQL).

Но вот незадача: установочный пакет этого плагина (и, кстати, многих других) требуется скопировать на сервер, на котором размещён сайт, однако, для моего случая (сайтом является блог на Blogger) возможность загрузки файлов скриптов и таблиц стилей Гуглом не предусмотрена. Тем не менее, решение нашлось.

Среди услуг, предоставляемых Гуглом имеется сервис для размещения и хранения документов — облачное хранилище Google Drive. Если у вас есть аккаунт на Google (например, почта), значит у вас есть и Google Drive.

Запустить этот сервис можно нажав на квадратик из точек в правом верхнем углу панели Google (см. скриншот вверху) и выбрав из выпадающего окна иконку «Диск» После этого можно создать папку для своих скриптов (у меня это папка jquery) — именно для этого и существует красная кнопка «Создать», перейти в созданную папку и, нажав на меньшую безымянную красную кнопку (со стрелкой вверх), примыкающую к кнопке «Создать», загрузить требуемые файлы (в рассматриваемом случае это файл скрипта jquery.highlight.js и сопровождающий его файл стилей jquery.highlight.css, заранее взятые из репозитария).

Следующий этап — «разблокирование» файлов для всеобщего доступа: по умолчанию, при загрузке доступ к файлу имеет только его владелец. На скриншоте вверху для файла установлен наивысший уровень доступа: «Общедоступно в Интернете» (любые другие варианты у моего блога вызывали острое неприятие и скрипт просто не загружался на страницу). Кстати, если вы создаёте отдельную папку для своих скриптов (как моя jquery) и на неё устанавливаете требуемый доступа, то все загружаемые в эту папку файлы тоже будут «общедоступны в Интернете» (нужно будет только подтвердить это в диалоговом окне после загрузки).

Очень важный этап — переделка адреса ссылки на загруженные файлы. Гугл генерирует ссылку примерно такого вида (находится в поле «Совместный доступ»):

https://drive.google.com/file/d/0D-SchqSURoSlR2Mk0Vm12GJSWcy/edit?usp=sharing

Из всей этой загадочной красоты реальное значение для нас имеет только идентификатор файла (выделен в предыдущей строке жирным шрифтом), который следует преобразовать к виду, пригодному для использования в блоге (в следующей строке он тоже выделен жирным шрифтом):

https://googledrive.com/host/0D-SchqSURoSlR2Mk0Vm12GJSWcy

На этом упражнения с Google Drive можно было считать законченными и переходить к водным процедурам, но остался совсем небольшой этап: вставить в шаблон блога ссылки на загруженные файлы (ведь ради этого и затевался весь сыр–бор).

Первым делом, выберите в боковом меню вашего блога позицию «Шаблон». После этого очень многие начинающие (а зачастую и продолжающие) блогеры сразу же, смело и решительно заходят в святая святых, нажимая на кнопку «Изменить HTML». Наш путь, по большому счёту, лежит туда же, но сначала предпримем простой и необременительный шаг для обеспечения собственной безопасности — нужно сделать резервную копию шаблона, для чего и предусмотрена кнопка «Резервное копирование и восстановление» на той же странице.

Последуйте мудрому совету разработчиков платформы Blogger — «загрузите шаблон полностью», как предлагает надпись на кнопке диалогового окна и, если вдруг какие–нибудь ваши камлания над блогом приведут к фатальному перекосу в его работоспособности, вам не придётся в отчаянии рвать на себе пучками волосы, стеная от душевной боли по невосполнимой утрате и физической боли, неизбежно сопровождающей столь варварский способ эпиляции.

Теперь, если вы сохранили шаблон вашего блога, можно заходить в режим «Изменить HTML» и вставить в любое место шаблона между тегами <head> и </head> строки, сконструированные вами на предыдущем этапе, следя за тем, чтобы они не попали внутрь тела какого–либо условного выражения (я это делаю сразу после <title> и </title>):

<title><data:blog.pageTitle/></title>
<script language='JavaScript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/>
    
<!-- jquery.highlight.js и jquery.highlight.css -->
<script language='JavaScript' src='http://googledrive.com/host/0B-SczaUpoUUY5SlkhqVm12GJS2g'/>
<link type="text/css" rel="stylesheet" media="all" href="http://googledrive.com/host/0B-SchqVm12GJT2pYaUtJd2UydlU" /> 

Для того, чтобы скрипт заработал, то есть, начал искриться и переливаться своими причудливыми красками, требуется:

• подключить библиотеку jquery.js (или её уплотнённый вариант jquery.min.js — строка №2 в верхней врезке кода),
• вставить туда же (между тегами <head> и </head>) ещё один фрагмент кода:

<script language='JavaScript'>
 $(document).ready(function(){
  $('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol',attribute: 'data-language'});
 });
</script>

Теперь осталось поместить код между тегами <pre class="code"> и </pre> — обязательно нужно указать имя класса и можно указать название языка, который находится в контейнере (допускаются варианты html, js, php, css и sql):

<pre class="code" lang="html"> <p>Привет, мир!</p> </pre>

Как наверняка уже догадался мой проницательный читатель, все примеры отображены уже с помощью плагина подсветки синтаксиса JQuery Sintax Highlight, то есть поставленная в начале статьи задача выполнена. Но в заключение должен сделать несколько замечаний. Во–первых, в первом контейнере указаны произвольные идентификаторы на файлы скрипта и таблицы стилей: вам нужно будет сформировать и свои собственные на Google Drive, поскольку эти — не рабочие.

Во–вторых, перед вставкой в контейнер HTML–кода необходимо предварительно преобразовать символы < и > в HTML–тегах на &lt; и &gt;, соответственно. Для этих целей удобно использовать онлайн перекодировщики, например, этот. В–третьих, кол, приведенный во втором контейнере ($(document).ready(function()…) тоже можно поместить в отдельный файл, загрузить этот файл на Google Drive, сформировать ссылку по изложенному в этой статье алгоритму и включить в заголовок документа в виде <script language='JavaScript' src='http://googledrive.com/host/[идентификатор файла]'/>.