Покращена підсвічування коду на веб сторінці від Google.








Нещодавно, Google порадував веб дизайнерів однією приємною штукою. Це, так званий, Google Code Prettifier. Дослівно на російську це не переведеш, але його зміст відображений в назві – "Поліпшена підсвічування коду на веб сторінці ".


У даному випадку під кодом розуміється код програми на одному з мов програмування. Не знаю як у вас, а мені частенько доводиться поміщати програмний код на веб сторінки. Якщо цей код буде написаний одним кольором, то читати його буде зовсім незручно. Кожен хто працював у спеціальних середовищах програмування (Visual Studio або Borland Builder) розуміє, як багато значить підсвічування синтаксису. Зробити підсвічування синтаксису мов програмування на веб сторінках, не тривіальна задача. Google, схоже, вирішив її і ділиться своїм рішенням з нами.


JavaScript і CSS, солодка парочка.


Приємною особливістю підходу Google є те, що веб дизайнер не повинен піклуватися про те, щоб "розфарбувати" код. Не потрібно виділяти кожен оператор спеціальними тегами. Все що необхідно, це укласти ваш код в тег <pre class="prettyprint"> …</ pre> і вуаля … Код виглядає, як у вашому улюбленому редакторі.


Реалізація "розфарбування" написана на JavaScript з використанням каскадних таблиць стилів (CSS), тобто вся розфарбування лягати на браузер (клієнт). Веб сервера навіть нічого не доводиться робити для цього. Більше того, кожен веб дизайнер може сам змінити кольору, на ті, які йому більше подобаються. Для цього достатньо лише відредагувати css файл.


Як змусити це працювати на своєму сайті


Змусити все це працювати не просто …, а дуже просто:)


Для початку необхідно завантажити два "магічних" файлу: prettify.js і prettify.css. Це найголовніші учасники "розфарбування". Знайти ці файли можна, наприклад, ось тут:
JavaScript Code
CSS File


Далі потрібно покласти ці файли на свій сервер, наприклад, в кореневу папку сервера.


Тепер, підключаємо ці два файли на сторінці, яка повинна виводити програмний код.


Наприклад, так:
<link rel="stylesheet" href="prettify.css" type="text/css">
<script type="text/javascript" src="prettify.js"> </ script>


Майте на увазі, що javascript файл prettify.js має розмір 43 кілобайт (що дуже багато), тому я рекомендую вам спочатку видалити з нього всі коментарі, прогалини і перенесення рядків.


Ну і останній штрих. Необхідно визначити для документа наступний обробник для onload евента: prettyPrint ()
Наприклад, ось так: <body onload="prettyPrint()">


Ось тепер все. Будь-який фрагмент коду укладений в теге <pre class="prettyprint"> тепер буде виглядати весело розфарбованим. Щоб не бути голослівним, наведу приклад розфарбування:

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*