Подсветка кода на сайте

Подсветка синтаксиса кода востребовано на многих сайтах. Много вебмастеров выкладывает на своих блогах листинги скриптов на разных языках программирования. Для более удобного восприятия и понимания листинга на сайте должна быть организованна подсветка синтаксиса. Для подсветки синтаксиса я использую js библиотеку SyntaxHighlighter. Разработал её Alex Gorbatchev и скачать можно здесь

Настройка syntaxhighlighter

После скачивания мы получаем архив syntaxhighlighter_3.0.83-1.zip. В самом архиве нас интересуют папки scripts, src и style. В папке scripts находятся файлы, которые отвечают за подсветку кода определённого языка программирования. Syntax highlighter поддерживает следующие языки:

В src находятся файлы ядра. В папке styles находится главный фал css стилей и файлы стилей возможных шаблонов. И так мы разобрали структуру файлов библиотеки. Давайте теперь разберёмся как подключить syntaxhighlighter к простой html страничке. Для начала подключим скрипт shCore.js. Это ядро всей библиотеки. После этого подключаем скрипты нужных нам языков. Я обычно выбираю shBrushCss.js, shBrushXml.js и shBrushJScript.js shBrushPhp.js для HMTL CSS JavaScript и PHP.

                    
    <script type="text/javascript" src="/js/shCore.js"></script>
    <script type="text/javascript" src="/js/shBrushCss.js"></script>
    <script type="text/javascript" src="/js/shBrushXml.js"></script>
    <script type="text/javascript" src="/js/shBrushJScript.js"></script>

После подключения всего необходимого активируем библиотеку.

                    
 <script type="text/javascript">
        SyntaxHighlighter.all()
 </script>

Так же подключаем css стили. shCore.css шаблон ядра и дефолтный шаблон shThemeDefault.css. Можно потестить и другие шаблоны.

 
    <link rel="stylesheet" href="/css/shCore.css" type="text/css">
    <link rel="stylesheet" href="/css/shThemeDefault.css" type="text/css">

Теперь у нас всё готово для работы. Листинг, что нам нужно подсветить помещаем в тег pre и назначаем ему класс brush и алиас языка, какой мы подсвечиваем. Html код должен выглядеть так:

                                     
  <pre class="brush: html">                                     
    <div class="wraperr">
        <div class="lefmenu">Hello world </div>
        <div class="content"> </div>
    </div>
  </pre>

Соответственно такой html код должен вывести пример, указанный ниже.

                                     
    <div class="wraperr">
        <div class="lefmenu">Hello world </div>
        <div class="content"> </div>
    </div>

Примечание: После установки syntaxhighlighter мне не понравилось наличие в листинге вертикальной и горизонтальной полос прокрутки. Поковыряв css проблему победил, но появились трудности с правильным переносом и нумерацией строк. Короче не стал изобретать велосипед и взял shCore.js, shCore.css, shThemeDefault.css из wordpress плагина SyntaxHighlighter Evolved. Качаем его отсюда. Выше перечисленные файлы брал из syntaxhighlighter2, из папки style взял картинки printer.png, page_white_copy.png, page_white_code.png, magnifier.png, help.png и скопировал в ту же папку что и shCore.css

Подключение syntaxhighlighter к joomla

В отличии от подключения syntaxhighlighter к обычной html страничке, в joomla его надо подключать к шаблону сайта, который мы сейчас используем. Для этого идём в корень нашего сайта в папку template и выбираем шаблон, который выбран по умолчанию, пусть это будет beez_20. В папке beez_20 выбираем папку css и копируем туда shCore.css, shThemeDefault.css и картинки printer.png, page_white_copy.png, page_white_code.png, magnifier.png, help.png, затем выбираем папку javascript и копируем туда shCore.js, shBrushCss.js, shBrushXml.js и shBrushJScript.js shBrushPhp.js. Открываем в любом текстовом редакторе файл index.php (это и есть файл шаблона ) из папки beez_20. Перед закрывающим тегом </head> следующий код:

                                     
  <?php
//условие для подключения syntaxhighlighter только в определённых категориях
 if((JRequest::getVar('catid')==10)||(JRequest::getVar('catid')==11)||(JRequest::getVar('catid')==12)||(JRequest::getVar('catid')==13)||(JRequest::getVar('catid')==15)){
 ?>
//подключение нужных стилей и js файлов
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/shCore.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/shThemeDefault.css" type="text/css" />
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/shCore.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/shBrushCss.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/shBrushXml.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/shBrushJScript.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/shBrushPhp.js"></script>
//активация syntaxhighlighter   
    <script type="text/javascript">
             SyntaxHighlighter.all()
    </script>
<?php
    };
?>