Показаны сообщения с ярлыком подсветка кода. Показать все сообщения
Показаны сообщения с ярлыком подсветка кода. Показать все сообщения

суббота, 29 ноября 2014 г.

Блокнот·два·плюса — форэва!

Ведь клялся же себе, что буду придерживаться умеренности, но опять сорвался: стремление к обновлению не имеет границ и с этим стремлением, можно даже сказать, страстью нужно поступать как с ремонтом в квартире — «закончить нельзя — можно только прекратить». Хорошо, что в этот раз удалось отделаться «малой кровью».

Как–то незаметно мои усилия по реорганизации инфраструктуры для разработки сайта (вернее, его переделки) во второй раз посягнули на святая святых разработчика — его редактор кодов. Напомню невнимательному читателю моего дневника, что однажды я уже перешёл с Homesite на Notepad++, а тут ещё раз шайтан взялся меня попутать — подсунул чудо современной программерско–компьютерной мысли, редактор Sublime Text. Грешен: повёлся! Ну, кто, скажите на милость, в здравом уме и при твёрдой памяти откажется от чуда чудного и дива дивного?

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

В конечном итоге, результаты заочного знакомства с новым редактором выглядели весьма оптимистично и привлекательно: и работает он шустрее, и интерфейс приятнее, и всяких приблуд для него видимо–невидимо… Весьма убедительны были традиционные пользователи Notepad++, которые стройными рядами, практически в едином порыве, с пламенным взором и песня́ми переходили под новые знамёна. Несколько настораживали встречавшиеся в Сети рекомендации о том, как изменить этот прекрасный редактор, чтобы он был похож на Notepad++.

И сегодня я, наконец–то, созрел: решил установить и попробовать — уж слишком много было хвалебных отзывов и практически отсутствовали весомые аргументы против (самым весомым являлась бесплатность Блокнота против «условнобесплатности» Сублима). Итак, установил, попробовал и …снёс, то есть, удалил. Фуфло!

Вообще–то, на этом можно было бы статью и закончить, но я решил, всё–таки, аргументировать свою позицию. Для начала повторю уже упоминавшийся аргумент: NPP (Notepad++) бесплатен, а ST (Sublime Text) пока условно бесплатен (лицензия стоит $70) — ключевой слово в этой фразе «пока», потому что никто не знает, когда разработчик включит обязательность приобретения лицензии, то есть, у пользователя возникнет необходимость поиска «таблэтки».

Кроссплатформенность ST, которую его апологеты выдвигают в качестве основного и весьма существенного преимущества, для меня неактуальна, а вот богатый инструментарий NPP для работы с различными кодировками кириллицы — весьма и весьма ценная фича. В ST я вообще не нашёл управления кодировками: наверное, потому, что редактор заточен под англоязычного пользователя, которому совершенно незачем заморачиваться со всякими там KOI–CP1251 и их многочисленными братьями–сёстрами. Я уж не говорю о том, что интерфейс редактора исключительно английский, и хотя у меня не возникает в этой связи языковой проблемы, русскоязычный NPP сердцу милее.

И хотя, как утверждают пользователи ST, уже наработана чёртова прорва плагинов под новый редактор, расширений для NPP всё равно больше. Я вполне допускаю, что моё поверхностное личное знакомство с SP оказалось уж слишком поверхностным, но у меня внезапно пропало желание углубляться, а я привык доверять своей интуиции, тем более, что был изначально настроен почти позитивно к SP.

Правильно настроенный NPP может творить чудеса: макросы, расширения (один только Emmet, a.k.a ZenCoding чего стоит), с подсветкой синтаксиса, перекодировкой. Я, кстати, добавил «раскраску» синтаксиса для SCSS, HTML5 и CSS3, а также скрипт для компиляции SCSS в CSS прямо из NPP (без плагина jN скрипт не работает). Я уж не говорю о разнообразных «стандартных» плагинах (тех, которые устанавливаются через Plugin Manager), щедрой рукой добавляющих Блокноту·два·плюса разнообразные полезности и «вкусности»

В общем, снова здравствуй, Блокнот! Я вернулся.

суббота, 12 апреля 2014 г.

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

Не так, чтобы это было крайне необходимо, но неуёмная тяга к прекрасному заставила меня сотворить некоторые усовершенствования и без того очень гибкой блог–платформы 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/[идентификатор файла]'/>.