Вы, наверное, обратили внимание на подсветку кода, которая применяется на этом сайте в различных примерах кода. Сегодня я расскажу о том, как это реализовано. Это 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>
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
Всем привет, меня зовут Вася!
</body>
</html>
Можно отображать и нумерацию строк, просто тегу pre добавьте класс linenums
<pre class="prettyprint linenums"> ... </pre>
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
Всем привет, меня зовут Вася!
</body>
</html>
Поделитесь ссылкой
Статистика
© 2011 - 2023 Школа MODX