2016
15
Март

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

grigoriev
2192

Подсветка синтаксиса кода востребовано на многих сайтах. Много вебмастеров выкладывает на своих блогах листинги скриптов на разных языках программирования. Для более удобного восприятия и понимания листинга на сайте должна быть организованна подсветка синтаксиса. Для подсветки синтаксиса я использую 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
    };
?>

Поделиться:

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


Защитный код
Обновить