Подключение

Вы, наверное, обратили внимание на подсветку кода, которая применяется на этом сайте в различных примерах кода. Сегодня я расскажу о том, как это реализовано. Это Google Code Prettifier - Подстветка кода на веб-странице. Google Code Prettifier автоматически определяет код. Подключить ее у себя на сайте, вы сможете буквально за несколько минут.

После того, как вы скачаете дистрибутивы, поместите два файла prettify.css и prettify.js в какую-нибудь папку вашего сайта. После этого добавьте подключение этих файлов:

<link rel="stylesheet" href="prettify.css" type="text/css" />
<script type="text/javascript" src="prettify.js"></script>

В тег <body> добавляем onload="prettyPrint()", должно получиться:

<body onload="prettyPrint()">

Примеры

Код, который необходимо подсвечивать заключите в тег pre

<pre class="prettyprint">
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
Всем привет, меня зовут Вася!
</body>
</html>
</pre>
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
Всем привет, меня зовут Вася!
</body>
</html>

Можно отображать и нумерацию строк, просто тегу pre добавьте класс linenums

<pre class="prettyprint linenums"> ... </pre>
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
Всем привет, меня зовут Вася!
</body>
</html>

Поделитесь ссылкой

Статистика

Яндекс цитирования
© 2011 - 2016 Школа MODX