Подсветка кода и форматированный листинг в Блоггер

Довольно-таки полезный пост, особенно для тех кто хочет постить код на блоггере

Вперёд!

Скрипт подсветки синтаксиса форматированного листинга

Прошу заметить, что данный метод я использовал во время публикаций на блоггере, так что там код иллюстрировал сам себя... Здесь же применен скрипт Prism от Lea Verou, так что результат описанного в этом посте вы можете видеть на картинке или пройдя по ссылкам ниже.

сайт Syntax hihtlighter
Скрипт для подсветки синтаксиса

Можно было бы сделать и просто перевод статьи с украинского, в которой обсуждалась аналогичная процедура, но все же напишу пару строчек "от себя". После поиска в гугле - находим коробочное решение, а именно скрипт "SyntaxHighlighter by Alex Gorbatchev который интергрируется в блог и оборачивает код с тегом pre в форматированый список с нумерацией строк и подсветкой синтаксиса. Несколько инструкций выложены по этой ссылке По дороге какрдинальных особенностей не возникло, так что мануалы годятся к употреблению в исходном виде;) Ну разве что вставлять скрипты нужно перед закрывающимся тегом хэд. Боль оптимизатора...

    
<!-- Syntax hihtlighter -->
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'></script>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'> 
 SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
  SyntaxHighlighter.config.stripBrs = true;
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>
<!-- Syntax hihtlighter end -->        
    
Подключаемые скрипты

А, еще одно - перед вставкой в коде нужно заменить символы на соответствующие им спецсимволы. Для этого можна воспользоваться этой онлайн утилитой которую нам любезно предоставляет автор автор скрипта. На этом все, пока что...

Выводы и сравнения с Prism

Я пользовался и тем и другим, однако однозначно так указать на что-то лучшее не могу. Синтакс хайлайтер хорош (мне нравится) тем, что имеет плюшки в виде копирования кода, открытия исходника и тд. Нумерованые строки тож плюс, можно ссылаться на них не дробя сниппет на более мелкие фрагменты. Призм в свою очередь очень легковесный, просто-кастомизируемый. Я пока что остановился на последнем. Сейчас думаю если бы вернулся к Хайлайтеру - запаковал бы все его скрпты вместе с остальными вендорами, а стили включил бы модулем к основным, негоже так уж много включений делать, тем более для простых поделок вроде блога. Выбор за вами, помните, что это всего-лишь инструменты и их применение "зависит от"

UPD По ходу столкнулся с некоторым упущением: забыл добавить скрипт для обработки цсс. Поэтому если вы планируете использовать скрипт для подсветки синтаксиса какого-то другого языка - прошу перейдите сюда, скопируйте и подключите соответствующий скрипт-кисточку для подсветки синтаксиса. Некоторые советуют все сразу включать, я не советую - время загрузки слишком уж ценное, а включать 10-15 скриптов "на будущее"- не "ком иль фо", проще использовать из предыдущей онлайн утилиты бонусную опцию и получить отформатированный код с инлайновимы стилями. Это если для одного примера на 100, как то для меня возможно был бы Руби...

UPD2 Забавно, но переписывая этот пост в новый блог я посмеялся, ведь теперь именно с Руби приходится сталкиваться довольно часто и подсветка его синтаксиса очень и очень не помешает. Эх опыт;)


Поделиться в соцсетях

Понравился пост? — расскажите о нём своим друзьям