22 июля 2010 г.

Подсветка кода в блогах на blogger.com

Захотелось сделать посты в своем блоге более привлекательными и юзабильными, поэтому и решил добавить подсветку в примерах кода.
Изучение Google.com и проба нескольких решений привела к следующему результату.
SyntaxHighlighter - это полнофункциональный самостоятельный скрипт подсветки синтаксиса (code syntax highliter) поддерживающий кучу языков, имеющий удобный небольшой тулбарчик с кнопками, позволяющими выводить исходник в отдельном окне, копировать его в буфер обмена или печатать. Теперь не надо после копи-паста удалять на каждой строчке лишние символы. Скрипт абсолютно мультиплатформенный и может работать в любом блоге хоть в WordPress, хоть в Joomla!, хоть в Blogger.com.
Как же установить SyntaxHighlighter в свой блог на blogger.com.
1. Заходим в админку своего блога.
2. Нажимаем Дизайн - Изменить HTML
3. Перед закрывающим тэгом </head> добавляем вот такой код:
<link href='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>



C 5 по 9 строчку идет подключение подсветки необходимых языков. У меня это PHP, XML, C#, Delphi, JS. Для подключения дополнительных языков необходимо скопировать любую из этих строчек и изменить имя подключаемого файла на необходимое. Полный список поддерживаемых языков, их brush алиасов и файлов, необходимых для их подсветки, можно узнать на сайте alexgorbatchev.com.


4. Чтобы подсветка отображалась необходимо заключать куски кода в тэги <pre class="brush: html"></pre>
, заменяя значение html свойства brush на алиас языка, синтаксис которого необходимо подсвечивать. Теперь все готово и должно работать. Стоит только обратить внимание,для того, чтобы всё корректно работало, необходимо внимательно следить, чтобы в исходниках, которые ты вставляешь в блог, символ "<" был заменён на "&lt;".

19 июля 2010 г.

Обратный отсчет на Java Script

Понадобилось установить на страницу счетчик который отсчитывает сколько времени осталось до истечения 15 минут.
Не смотря на то, что в сети полно примеров, многие из них не комментированы и поэтому не понятны людям не сильно знакомым с JS (как я например).
Собственно сам таймер.
Место для вывода результата текстовое поле
Осталось:

минут!
собственно сам код скрипта

В этой строчке задается время отсчета в миллисекундах. При желании можно модифицировать код так, что он будет показывать обратный отсчет не минут, а допустим секунд с десятыми или сотыми долями.
Для этого заменяем 1000 на 100 тут
setTimeout("display()",1000)
А так же замените в коде все 14 на 29 и 59 на 9 или 99.

Внимание Не стоит использовать этот код в таких случаях как задержка перед выполнением какого-то скрипта (аля rapida.com), т.к. данное значение легко подменить пользователем. Для решения подобной задачи используйте контроль времени на стороне сервера, а данный код просто для информирования пользователя