Публикации
Публикации  »  HTML + CSS

Подсветка синтаксиса с помощью Syntaxhighlighter

Если вы хотите чтобы на вашем сайте листинг программ выглядел красиво и аккуратно, самый лучший путь - это найти уже готовое решение, чтобы не писать самому с нуля все необходимые алгоритмы для подсветки синтаксиса. Одно из таких решений: Syntaxhighlighter - простой в подключении и использовании. На этом сайте именно он и используется для вывода кода различных программ.

Вот один пример подсветки кода на JavaScript:

var a=1;
alert(a);
Test();

function Test ()
{
  var url = document.getElementById('test').value;
  return true;
}

Для подключения Syntaxhighlighter необходимо выполнить следующие шаги:

  1. Подключить основной JavaScript файл shCore.js
  2. Подключить css-файл оформления кода shCoreDefault.css. Можно выбрать и другой вариант оформления кода, чтобы подходил для вашего сайта, и подключить соответствующий css-файл (например, shCoreEmacs.css)
  3. Добавить JavaScript-файл языка подсветки (например, shBrushPhp.js для подсветки php-кода)
  4. Оформить код в теги <pre class="brush: php;"> ... </pre>, указав после brush код нужного языка программирования.
  5. Вызвать подсветку синтаксиса с помощью 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-оформления здесь.

Категория: HTML + CSS

Комментарии к статье:

Пока комментариев нет, ваш будет первым ;)

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