понедельник, 10 сентября 2012 г.

Как установить подсветку синтаксиса исходного кода на Blogger

Для подсветки исходного кода я использую SyntaxHighlighter. Он может подсвечивать исходный код на языках C++, PHP, JavaScript, Python и т.д. Для этого, код который нужно подсвечивать, нужно разместить внутри тега <pre>, указав класс CSS brush: <язык>. Но перед этим в теге <head> разместить следующий код:

Этот способ годится тем у кого сайт крутится на хостинге. А что делать нам блоггерам? Все очень просто.


Все что нужно это разместить CSS и JS файлы SyntaxHighlighter'а на том же sites.google.com. Я пошел именно по этому пути. Вы можете придумать что-то свое. Создать сайт на sites.google.com проще простого. Поэтому я не буду описывать процесс создания.

Но вначале загрузим SyntaxHighlighter. Перейдем на страницу загрузки SyntaxHighlighter. Выбираем нужную версию (я выбрал версию  3.0.83). Сохраним его пока у себя на компьютере. Далее распакуем архив. И увидим такую структуру каталогов:


Нам понадобятся следующие файлы:
  • styles/shCore.css
  • styles/shCoreDefault.css
  • scripts/shCore.js
  • scripts/shBrushCpp.js
  • scripts/shBrushPhp.js
  • scripts/shBrushJScript.js
После того как сайт готов переходим в боковой панели -> управление сайтом -> приложения и нажимаем добавить. Выбираем файлы из списка выше.

Ну теперь нужно прикрутить их к Blogger. Переходим в панели Blogger -> Шаблон -> Изменить HTML нажимаем Приступить и поставим чекбокс Расширить шаблоны виджета. Далее находим в шаблоне где начинается тег head и добавляем в него этот код:
Ну теперь мы можем добавлять код на страницу для этого просто включаем код в содержимое тега <pre> вот так:


function example(params)
{
    var localVar = params;
    alert(localVar);
    // и т.д.
}

example('Hello world!');
Вот такие дела :)
Автор: на
Ярлыки:

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)