Заведешь себе вот блог ... пишешь ... пишешь ... и ... Р-Р-РАЗ появляется необходимость опубликовать некий исходный код. Будь то C++, PHP, Java или еще какой ... штатной возможности сделать это красиво (читай "осуществить подсветку синтаксиса") в блоге на движке Blogger нет. Конечно, можно самому все "раскрасить", но делать это с листингом даже в несколько десятков строк придется по душе только истинным "мазохистам" :-). Впадать в отчаяние тоже не стоит - вопрос решаем ;-). И на помощь нам приходит библиотека Highlight.js.
1. подключение библиотеки к своей странице и последующее автоматическое форматирование фрагментов исходного кода в сообщениях;
2. предварительная обработка с помощью библиотеки фрагментов исходного кода с последующим включением уже в отформатированном виде в текст сообщения.
У каждого из способов есть и свои достоинства и свои недостатки. В свете рассмотрения применимости библиотеки на Blogger.com, у первого способа "минусы" значительно превосходят "плюсы" - требуется время на загрузку со стороннего ресурса, а так же на разбор исходного кода. Добавьте к этому возможную вероятность "недоступности" библиотеки (например, ее удаление на стороннем сервере) или отключение пользователем выполнения JavaScript сценариев в браузере ... картина, я думаю, понятная рисуется :-).
Поэтому, для себя я выбрал второй способ и "друзьям советую" так же делать. На выходе мы получаем статичный HTML код, который уже "никуда не денется" :-).
Итак, кому лень читать документацию, я обрисую принципиальную схему работы с библиотекой по формированию форматированного исходного кода и его добавлению в текст сообщений на Blogger.com.
Во-первых, необходимо посетить страницу проекта и скачать библиотеку - для этого в разделе загрузки отметьте галочками языки программирования, разбор синтаксиса которых вам нужен, и смело жмите "Скачать" :-) (кстати, там же вы можете ознакомиться с инструкцией как осуществить подключение библиотеки с ресурса Yandex для автоматического форматирования исходного кода). Полученный таким образом архив распакуйте в любую удобную вам директорию.
Во-вторых, используя страницу примеров, файл test.html, выберите стиль оформления, который вам симпатизирует. Выбрали? Что же... теперь необходимо соответствующий код CSS скопировать в шаблон блога. Каждый стиль размещен в отдельном файле стиля в директории styles, на момент написания очерка таких насчитывалось тринадцать: Default, Dark, FAR, IDEA и др. Файлы стиля имеют те же имена, что и названия стилей в файле примеров - так что проблем с идентификацией нужного возникнуть не должно :-). Скопировав в буфер обмена содержимое файла, обращаемся к настройкам дизайна блога: "Дизайн"->"Изменить HTML". И, в явившемся нашему взору шаблоне блога в формате HTML, вставляем код стиля из буфера обмена в любое ... свободное место :-), главное между тегами <HEAD> ... </HEAD>. Сохраните проделанные изменения. Конечно, ничто вам не мешает подобным образом создать и свой собственный, уникальный стиль оформления ;-).
В-третьих, воспользовавшись страницей экспорта export.html, приведите нужный вам исходный код в форматированный вид (хотя библиотека и сама способна определить язык программирования, я все же рекомендую вам указывать его вручную). По сути все - полученный HTML код смело размещайте в вашем сообщение (конечно же в режиме редактирования HTML - опция редактора сообщений "Изменить HTML").
Результатом ваших манипуляций станет исходный код с подсвеченным синтаксисом, как, например, вот этот:
#include <iostream>
int main () {
std::cout << "Hello, world!" << std::endl;
};На этом все! Красивых вам листингов ;-)
спасибо, весьма полезная заметка :)
ОтветитьУдалитьAlex
ОтветитьУдалитьВсегда пожалуйста :)
Спасибо огромное :)
ОтветитьУдалитьwh1
ОтветитьУдалитьОгромное пожалуйста :)