Главная » FAQ » Подсветка кода в DLE

Подсветка кода в DLE

28-02-2011, 14:40 n0wheremany Комментарии (29) Просмотры (9784)
Подсветка кода в DLE Многие задают вопросы - как подсветить код на странице. Раньше я использовал Geshi - подсветку средствами PHP, но это увеличивало нагрузку на сервер, и размер БД. Сегодня я расскажу о том, как сделать подсветку кода в тэгах code на сайте DLE через Java через SyntaxHighlighter.

Чтобы из
print('Я ГеНиЙ');


получилось
print('Я ГеНиЙ');


Итак начинаем:
На момент написания статьи вышла SyntaxHighlighter версии 3.0.83. Её и будем использовать.

  • Нам понадобится исходные файлы ява скрипта:

    SyntaxHighlighter + Инструкция 32,26 Kb (cкачиваний: 204)

    parse.class.php для 9.3 10,95 Kb (cкачиваний: 92)

  • Начинаем установку.
    Для начала зальём все это дело в engine\classes\sh\

    Данная инструкция только для информации, т.к. парсер вырезает код некоторый, текст был искажен, следовательно работать он не будет.
    Правильный код представлен в архиве


    Теперь правим файлы
    • engine\classes\sparse.class.php

      Ищем:
              if( $this->allow_code )
                  $source = preg_replace( "#\[code\](.+?)\[/code\]#ies", "\$this->code_tag( '\\1' )", $source );

      меняем на
              if( $this->allow_code ) {
                  $source = preg_replace( "#\[code\](.+?)\[/code\]#ies", "\$this->code_tag( '\\1' )", $source );
                  $source = preg_replace( "#\[code=(.+?)\](.+?)\[/code\]#ies", "\$this->code_tag( '\\2' , '\\1' )", $source );
              }


      Ищем
              $source = preg_replace( "#\[code\](.+?)\[/code\]#is", "<!--code1--><div class=\"scriptcode\"><!--ecode1-->\\1<!--code2--></div><!--ecode2-->", $source );


      Ниже вставляем
              $source = preg_replace( "#\[code=(.+?)\](.+?)\[/code\]#is", '<pre class="brush:\\1">\\2</pre>', $source );


      Ищем
              $txt = preg_replace( "#<!--code2-->(.+?)<!--ecode2-->#", '[/codе]', $txt );


      Ниже вставляем
              $txt = preg_replace( "#<pre class=\"brush:(.+?)\">(.+?)</pre>#", '[code=\\1]\\2[/codе]', $txt );


      Ищем
              if( $wysiwig != "yes" ) $txt = preg_replace( "#\[code\](.+?)\[/code\]#ies", "\$this->decode_code('\\1', '{$use_html}')", $txt );


      Меняем на
              if( $wysiwig != "yes" ) {
                  $txt = preg_replace( "#\[code\](.+?)\[/code\]#ies", "\$this->decode_code('\\1', '{$use_html}')", $txt );
                  $txt = preg_replace( "#\[code=(.+?)\](.+?)\[/code\]#ies", "\$this->decode_code('\\2', '{$use_html}', '\\1')", $txt );
              }


      Ищем
          function code_tag($txt = "") {


      Меняем на
          function code_tag($txt = "", $type = "") {


      Ищем
              $p = "[code]{2}


      Меняем на
              if ($type=="") {
                  $p = "[code]{3}


      Ищем:
          function decode_code($txt = "", $use_html) { 


      Меняем на
          function decode_code($txt = "", $use_html, $type = "") { 


      Ищем:
              return "[code]{4}


      Меняем на:
              if ($type=="")
                  return "[code]{5}


    • templates\ВАШ ШАБЛОН\main.tpl

      В блок HEAD
      Вставляем
      <link type="text/css" rel="stylesheet" href="/engine/classes/sh/SyntaxHighlighter.css"/>
      <script type="text/javascript" src="/engine/classes/sh/shCore.js"></script>
      <script type="text/javascript" src="/engine/classes/sh/shAutoloader.js"></script>


      Ищем
      </body>
      </html>


      выше вставляем

      <script language='javascript'>
      function path() {
          var args = arguments,
              result = [];
          for(var i = 0; i < args.length; i++)
              result.push(args[i].replace('@', '/engine/classes/sh/'));
          return result
      };

      SyntaxHighlighter.autoloader.apply(null, path(
          'applescript            @shBrushAppleScript.js',
          'actionscript3 as3        @shBrushAS3.js',
          'bash shell                @shBrushBash.js',
          'coldfusion cf            @shBrushColdFusion.js',
          'cpp c                    @shBrushCpp.js',
          'c# c-sharp csharp        @shBrushCSharp.js',
          'css                    @shBrushCss.js',
          'delphi pascal            @shBrushDelphi.js',
          'diff patch pas            @shBrushDiff.js',
          'erl erlang                @shBrushErlang.js',
          'groovy                    @shBrushGroovy.js',
          'java                    @shBrushJava.js',
          'jfx javafx                @shBrushJavaFX.js',
          'js jscript javascript    @shBrushJScript.js',
          'perl pl                @shBrushPerl.js',
          'php                    @shBrushPhp.js',
          'text plain                @shBrushPlain.js',
          'py python                @shBrushPython.js',
          'powershell ps posh        @shBrushPowerShell.js',
          'ruby rails ror rb        @shBrushRuby.js',
          'sass scss                @shBrushSass.js',
          'scala                    @shBrushScala.js',
          'sql                    @shBrushSql.js',
          'vb vbnet                @shBrushVb.js',
          'xml xhtml xslt html    @shBrushXml.js'
      ));
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.config.stripBrs = false;
      SyntaxHighlighter.config.toolbar = false;
      SyntaxHighlighter.all();
      </script>




  • теперь нам можно использовать
    как [codе] тут код [/codе],
    так и [codе=php] тут код [/codе]


Все протестировано на DLE 9.2

Другие новости по теме

Уважаемый посетитель

Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария


Коментарии

#29 1 декабря 2011 08:45 fazanaka

SX2,
посмотри тут - http://dle-solutions.ru/dle/hacks/13-podsvetka-koda-v-dle.html

действие 1 - это то что тебе надо

и еще пожалуйста посмотрите парсер для 9.4,
Ищем
$p = "[code]{2} - этого я не нашел в 9.4 и все что дальше надо было изменить в парсере!
Публикаций: 0 Комментариев: 7 [ цитировать ]

#28 9 ноября 2011 22:38 SX2

Как сделать что тбы при нажатии на кнопку сразу было [code=phpътекст [/code] а не [code]текст[.code] ???
Публикаций: 0 Комментариев: 0 [ цитировать ]

#27 28 сентября 2011 22:51 winchester7

О, большое спасибо и за статью и за помощь. Действительно, как это я сам не догадался фикс поставить... Теперь все хорошо. Спасибо еще раз!
Публикаций: 0 Комментариев: 0 [ цитировать ]

#26 28 сентября 2011 19:14 n0wheremany

winchester7,
У меня такая же проблема. Чтобы не крутить с настройками css для всего сайта и править их, тупо сделал фиксированную ширину блока. И смотрится нормально и не мешает никому.


--------------------
Публикаций: 68 Комментариев: 744 [ цитировать ]

#25 27 сентября 2011 20:02 winchester7

Доброго времени суток всем. Поставил подсветку себе на блог. Все работает, только проблема с шаблоном. Весь перекошен становится. Был бы благодарен, если бы кто-нибудь помог.

_http://milov7.ru/41-zaschita-dle-ot-vzloma-otvet-seolostu.html (не спам)

Изменил в SyntaxHighlighter.css width в 4 местах с 100% на 70%. Код за границы поста перестал заходить, но сама ширина поста не изменилась почему-то. Помогите пожалуйста как будет время smile
Публикаций: 0 Комментариев: 0 [ цитировать ]

#24 17 августа 2011 21:05 n0wheremany

Поставил на чистый 9.3 - без проблем подсвечивается


--------------------
Публикаций: 68 Комментариев: 744 [ цитировать ]

#23 16 августа 2011 06:19 n0wheremany

Я посмотрю вечером в чем различие 9.3 от 9.2. Как вариант конечно можно просто заменить парсер на 9.2.
Но лучше дождаться вечера )


--------------------
Публикаций: 68 Комментариев: 744 [ цитировать ]

#22 16 августа 2011 04:12 alexben

9.3 НЕ работает.
33 раза ставил, в php не много разбираюсь но не стал править парсер на рабочем сайте.
но [codе=php] тут код [/codе] выводит как есть.
Публикаций: 0 Комментариев: 0 [ цитировать ]

#21 17 июля 2011 11:45 n0wheremany

Да должно, там особых изменений не было


--------------------
Публикаций: 68 Комментариев: 744 [ цитировать ]

#20 17 июля 2011 11:08 Арти

А на 9.3 пойдет?
Публикаций: 0 Комментариев: 0 [ цитировать ]

#19 12 мая 2011 21:27 Apach47

Возникла такая проблема: при обрамлении кода тегами
.....
хайлайтер так же выводит все хтмл-теги, сгенерированные редактором DLE. Подскажите пожалуйста как с этим бороться.

P.S.: все делал строго по инструкции. Версия DLE 9.2

Пример проблемной страницы http://rootblog.info/51-i-snova-zaschita-ot-ddos.html

*тегами [ code = bash ]........[ / code ]
Публикаций: 0 Комментариев: 0 [ цитировать ]

#18 24 апреля 2011 22:54 fazanaka

Вау, спасибо вам огромное ! Хороший у Вас блог, буду советовать друзьям smile
Публикаций: 0 Комментариев: 7 [ цитировать ]

#17 24 апреля 2011 16:32 n0wheremany

Цитата: fazanaka
Извините что не по теме, но я просто не знаю куда уже писать, никто не знает! Есть рейтинг новости, в полной новости отображается рейтинг + количество голосов, вопрос, как вывести количество голосов в короткую новость ? =(


в show.short.php надо до

$tpl->compile( 'content' );


вставить

$tpl->set( '{vote_num}', $row['vote_num'] );


--------------------
Публикаций: 68 Комментариев: 744 [ цитировать ]

#16 24 апреля 2011 10:01 fazanaka

Извините что не по теме, но я просто не знаю куда уже писать, никто не знает! Есть рейтинг новости, в полной новости отображается рейтинг + количество голосов, вопрос, как вывести количество голосов в короткую новость ? =(
Публикаций: 0 Комментариев: 7 [ цитировать ]

#15 13 апреля 2011 21:54 fazanaka

n0wheremany, как сделать в редакторе вывод сразу [ code=cpp ][ /code ] ? Буду благодарен
Публикаций: 0 Комментариев: 7 [ цитировать ]

#14 13 апреля 2011 21:18 n0wheremany

fazanaka,

Я не писал такого же. этот способ в корне неверный. Надо было просто на кнопку посадить генерацию [code=] а не [code]


--------------------
Публикаций: 68 Комментариев: 744 [ цитировать ]

#13 13 апреля 2011 21:10 fazanaka

n0wheremany, Паша написал что можно сделать таким образом :
Цитата: Паша
$source = preg_replace( "#\[code\](.+?)\[/code\]#is", "<pre class='brush: js'>\\1</pre>", $source );
, так вот, я не знаю при каких обстоятельствах, но потом в у меня пропала подсветка! В новости, вместо ожидаемого кода [ code ]....[ /code ] стояло вот это: <pre class='brush:>......</pre>
Публикаций: 0 Комментариев: 7 [ цитировать ]

#12 13 апреля 2011 19:48 n0wheremany

Цитата: fazanaka
Увы, подсветка таким способом (как описаны выше)проработала буквально день, пока я не обновил новости, всё полетело


Чтобы это значило? Если хотите решить проблему нужно её детальное описание.
Самое интересное что подстветка сделана через Ява скрипт и некоим образом не относится к бд


--------------------
Публикаций: 68 Комментариев: 744 [ цитировать ]

#11 13 апреля 2011 19:07 fazanaka

Увы, подсветка таким способом (как описаны выше)проработала буквально день, пока я не обновил новости, всё полетело wassat

Пришлось восстанавливать БД recourse
Публикаций: 0 Комментариев: 7 [ цитировать ]

#10 13 апреля 2011 18:06 Дмитрий

Цитата: Паша
$source = preg_replace( "#\[code\](.+?)\[/code\]#is", "<pre class='brush: js'>\\1</pre>", $source );

Спасибо, помогло

n0wheremany, здесь код вылазит за предел контейнера с контентом, overflow: auto нужен
Публикаций: 0 Комментариев: 0 [ цитировать ]