Если вы хотите чтобы на вашем сайте листинг программ выглядел красиво и аккуратно, самый лучший путь - это найти уже готовое решение, чтобы не писать самому с нуля все необходимые алгоритмы для подсветки синтаксиса. Одно из таких решений: Syntaxhighlighter - простой в подключении и использовании. На этом сайте именно он и используется для вывода кода различных программ.
Вот один пример подсветки кода на JavaScript:
var a=1;
alert(a);
Test();
function Test ()
{
var url = document.getElementById('test').value;
return true;
}
Для подключения Syntaxhighlighter необходимо выполнить следующие шаги:
- Подключить основной JavaScript файл shCore.js
- Подключить css-файл оформления кода shCoreDefault.css. Можно выбрать и другой вариант оформления кода, чтобы подходил для вашего сайта, и подключить соответствующий css-файл (например, shCoreEmacs.css)
- Добавить JavaScript-файл языка подсветки (например, shBrushPhp.js для подсветки php-кода)
- Оформить код в теги <pre class="brush: php;"> ... </pre>, указав после brush код нужного языка программирования.
- Вызвать подсветку синтаксиса с помощью JavaScript-кода SyntaxHighlighter.all();
Вот итоговый пример простейшего варианта подсветки php-кода:
<html>
<head>
<title>Hello SyntaxHighlighter</title>
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>
<body>
<pre class="brush: php;">
function helloSyntaxHighlighter()
{
return "hi!";
}
</pre>
</body>
</html>
В результате этот код будет выглядеть на странице так:
function helloSyntaxHighlighter()
{
return "hi!";
}
Ознакомиться с полным перечнем всех поддерживаемых языков программирования можно здесь.
А перечень тем css-оформления здесь.
Комментарии к статье:
Добавить комментарий: