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

    2 комментария 2155

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

Демо

Телеграм-канал serblog.ru

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

К странице подключается библиотека 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>

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

СКАЧАТЬ

Любая сумма на развитие сайта

2 комментария
  1. Я и мои читатели давно сталкивались с проблемой конфликта JQuery с плагинами и внутренними настройками wordpress. Порылся я в кодексе wordpress и нашел решение! 🙂 Правда, если код скрипта JQuery длинный, то придется делать много замен.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *