пятница, 13 апреля 2012 г.

Красиво оформляем код в блоге с подсветкой синтаксиса.

Надоело вставлять конфиги и постоянно натыкаться на то, что движок мне где то поменял символы или вообще не отобразил нужный текст. А самое интересное, что блог может автоматом еще и дописывать мне код :)

Выбрал самый оптимальный вариант подсветки синтаксиса и оформления кода SyntaxHighlighter.



Вот что у меня получилось:




Теперь, если оформление заинтересовало, расскажу как все это чудо установить на blogger.com (blogspot.com).

1) Заходим в "Шаблон" в правом верхнем углу кнопка "Резервное копирование и восстановление" --> Сохраняем наш шаблон полностью
2) Открываем в любом текстовом редакторе
3) После
вставляем мой выше приведенный код. и редактируем под себя.
4) Загружаем обратно через "Резервное копирование и восстановление"

Как добавить код?
При создании сообщения,  в момент когда надо вставить код, выбираем вид форматирования "HTML" и ручками вносим теги. Вот пример:

Получим:


ВНИМАНИЕ!!! Обнаружился 1 нюансик, если в скрипте присутствует тег
Его надо обязательно заменить на:
Вам может пригодится конвертирование, которым воспользовался я - Конвертация символов в их числовые значения (unicode values)


P.S.
Информацию по настройки вы можете почерпнуть с оф. сайта SyntaxHighlighter.
Вместо кучи CSS тегов конечно можно было вставить строчку:

Но меня не устраивает оформление и поэтому я перенес и поправил целиком стиль.
Разукрашки добавил тоже не все, только те, которыми я пользуюсь. Список всех вот тут.


Ну вот вроде бы и все ;) Улыбаемся и ... пишем :)

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

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