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

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

Вперед!

Скрипт підсвічування синтаксису форматованого лістингу

Прошу зауважити, що даний метод я використовував під час публікацій на Блогері, так що там код ілюстрував сам себе ... Тут же застосований скрипт 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 Забавно, але переписуючи цей пост в новий блог я посміявся, адже тепер саме з Рубі доводиться стикатися досить часто і підсвічування його синтаксису дуже і дуже не завадить. Ех досвід ;)


Поділитись в соцмережах

Сподобався пост? — розкажіть про нього своїм друзям