Необычный просмотр исходного кода страницы

Здравствуйте, друзья. Эта статья будет последней в моем одиночном марафоне на блоге. Если вы интересуетесь созданием сайтов, то наверняка знаете, как посмотреть исходный код страницы. Это можно сделать при помощи правой кнопки мыши или сочетанием клавиш в браузере Ctrl + U. Забегая вперед, скажу, что метод необычного просмотра исходного кода работает на JQuery и CSS3. И чтобы вы сразу поняли о чем идет речь, предлагаю посмотреть демонстрационную страницу. Но хочу сразу предупредить, чтобы не было лишних вопросов, этот метод работает пока не во всех браузерах. Так что, если вы не видите никаких изменений, то скорее всего нужно просто обновить браузер или сменить его на другой.

Демо

Для чего это может пригодиться? Если вы тоже, как и я, готовите для своих читателей уроки с демонстрационными страницами, то вместо того, чтобы специально подготавливать архив для скачивания, можно реализовать такой вариант просмотра исходного кода. Не нужно ничего качать, можно разобраться в коде прямо с сайта. Но это всего лишь мое мнение. Возможно у вас возникнут идеи куда поинтереснее и найдется еще более креативный способ реализации такого эффекта.

К странице подключается библиотека JQuery и внешний файл скриптов prettify.js.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="prettify/prettify.js"></script>

Плюс на странице еще вставлена функция? которую я не могу показать здесь, так как она некоторые элементы конфликтуют с плагином отображения исходного кода. Но на демонстрационной странице как раз все видно. И можете скачать этот пример себе на компьютер и разобраться подробнее.

СКАЧАТЬ