На днях надо было запостить листинг простенького скрипта, так пришлось
думать как подсветку ему прикрутить, у blogspot эта функция почему-то
не реализована.Решил поделится рецептом, вдруг ещё кому-то пригодиться.
Для начала нам нужно зайти на
http://github.com/ioquatix/jquery-syntax/downloads
,и скачать оттуда последнюю версию jQuery.Syntax, затем пройти на
http://jquery.com/ и там скачать сам jQuery фреймворк.
В результате после извлечения из архива jQuery.Syntax мы получим
следующее:
Каталог с произвольным именем вида: "ioquatix-jquery-syntax-7b0010b".
И файл "jquery-1.4.2.min.js", где цифры в названии обозначают версию и
могут отличаться от той, что у меня.
Ну, вроде всё собрал, теперь нужно всё это закинуть в новый
каталог, например в "jscripts".
А сейчас мы должны куда-то закинуть это добро, например на ваш хостинг,
или на любой сервис для хранения файлов с возможностью публичного
доступа к ним по HTTP.
Мой любимый сервис - https://www.dropbox.com/. Качаете для сервиса
клиент, проходите регистрацию, и залогинившись в клиенте, кидаете в
каталог "Public" приготовленный ранее каталог "jscripts".
Теперь нам надо узнать public link для доступа к каталогу "jscripts".
Заходим в каталог "jscripts", и выбираем пункт меню "Copy Public Link".
Получаем что-то такое:
http://dl.dropbox.com/u/циферки_какие-то/jquery-1.4.2.min.js
Затем от полученного адреса откусываем имя нашего файла, и получаем
ссылку на каталог "jscripts". Приблизительно такую:
http://dl.dropbox.com/u/циферки_какие-то/
А теперь заходим в шаблон нашего блога(Для blogspot надо зайти в
"Дизайн"->"Изменить HTML") и ищем в тексте шаблона тег <head>.
Там прописываем jQuery и jQuery.Syntax:
<!--Тут будет наш код.-->
<!--Подключаем jQuery-->
<script
src='http://dl.dropbox.com/u/циферки_какие-то/jscripts/jquery-1.4.2.min.js'
type='text/javascript' charset='utf-8' />
<!--Подключаем jQuery.Syntax-->
<script
src='http://dl.dropbox.com/u/циферки_какие-то/jscripts/jquery_syntax/jquery.syntax.min.js'
type='text/javascript' charset='utf-8' />
<!--Подключаем скрипт, который после загрузки DOM модели документа
начинает выполняться автоматически-->
<script charset='utf-8' type='text/javascript'>
// This function is executed when the page has
finished loading.
// Эта функция запускается, когда загрузка страницы
завершена.
jQuery(function($) {
// This function does all the
setup and then highlights (by default) pre and code tags which are
annotated correctly.
//Эта функция устанавливает обработчик для подсветки тегов pre и
code , если они правильно объявены.
$.syntax({root:"http://dl.dropbox.com/u/7624165/jscripts/jquery_syntax/"});
});
</script>
<!--Конец нашего кода-->Выглядит это так:
<head>
Наш код сразу за head.
А это всё, что тут было.
</head>
Теперь для тех, у кого страничка или блог не на blogspot'е. Вам надо
просто отредактировать текст шаблона вашего сайта. Как это сделать -
можно узнать из справки вашего сервиса, или руководстве к вашей
CMS.
Если ваш каталог "scripts" вы разместили на другом сервисе, узнайте как
получить доступ к файлам каталога по HTTP. И соответственно измените
путь в вашем коде.
Замените "http://dl.dropbox.com/u/7624165/jscripts/jquery_syntax/" на
"http://адрес_хостинга_или_сервиса_хранения/путь_к_нашим_файлам/".
А теперь в вашей статье или заметке обрамите код на каком-то языке
тегом code или pre.
Допустим у нас есть код на языке C++:
#include
int main()
{
std::cout << "Hello World!" << std::endl;
}
Помещаем его внутрь тега pre:
<pre class="syntax brush-clang">
#include <iostream>
int main()
{
std::cout << "Hello World!" << std::endl;
}
</pre>
И получаем в результате такой вот блок с подсвеченным исходником.
#include <iostream>
int main()
{
std::cout << "Hello World!" << std::endl;
}
Как включить подсветку для блоков с другими языками описано на
http://www.oriontransfer.co.nz/software/jquery-syntax/examples/index
Удачи в ваших экспериментах. Желаю всем счастья и результативной работы.
