Если вы хотите чтобы на вашем сайте листинг программ выглядел красиво и аккуратно, самый лучший путь - это найти уже готовое решение, чтобы не писать самому с нуля все необходимые алгоритмы для подсветки синтаксиса. Одно из таких решений: 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-оформления здесь.
Комментарии к статье:
Добавить комментарий: