Хаки DLE

Подсветка кода с помощью Google-Code [DLE 9.x — 10.x]

Подсветка кода с помощью Google-Code [DLE 9.x — 10.x]

Название: ПОДСВЕТКА СИНТАКСИСА В DLE С ПОМОЩЬЮ GOOGLE-CODE-PRETTIFY
Автор: ПАФНУТИЙ
CMS: ALL
Описание:
Небольшой хак для dle, позволяющий организовать подсветку синтаксиса кода с помощью Google Code Prettify всеми любимой и проверенной библиотеки от гугла.
Подсветка синтаксиса с помощью Google Code Prettify
1. Качаем последнюю сжатую (несжатая нам в принципе нафиг не нужна) версию скрипта подсветки синтаксиса с google-code-prettify (на данный момент это версия от 4 марта 2013 года.)
Заливаем файлы в нужные папки шаблона CSS — к CSS, js — к js.
2. Открываем файл engine/classes/parse.class.php
Находим код:

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

меняем на:

$source = preg_replace( "#\[code\](.+?)\[/code\]#is", "<!--code1--><pre class=\"prettyprint linenums\"><!--ecode1-->\\1<!--code2--></pre><!--ecode2-->", $source );

3. Открываем файл main.tpl и перед вставляем код:

<script type="text/javascript" src="{THEME}/ПУТЬ/prettify.js"></script>
<script type="text/javascript">$(function(){prettyPrint();});</script>

слово ПУТЬ меняем на нужный путь к файлу prettify.js
4. Настраиваем CSS под свой сайт.
 Для лентяев привожу свой css-код (dle-faq.ru)

/***** подсветка кода ********/
/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 }  /* plain text */
.str { color: #080 }  /* string content */
.kwd { color: #008;  font-weight: bold  }  /* a keyword */
.com { color: #800; font-style: italic  }  /* a comment */
.typ { color: #606; font-weight: bold }  /* a type name */
.lit { color: #066 }  /* a literal value */
/* punctuation, lisp open bracket, lisp close bracket */
.pun, .opn, .clo { color: #660 }
.tag { color: #008 }  /* a markup tag name */
.atn { color: #606 }  /* a markup attribute name */
.atv { color: #080 }  /* a markup attribute value */
.dec, .var { color: #606 }  /* a declaration; a variable name */
.fun { color: red }  /* a function name */
/* Put a border around prettyprinted code snippets. */
pre.prettyprint { 
    padding: 0; 
    border: 1px solid #ccc; 
    overflow: auto;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin: 0 0 0 30px;} /* IE indents via margin-left */
ol.linenums li {list-style: decimal-leading-zero outside none; color: #ccc;}
/* Alternate shading for lines */
li.L1, li.L3, li.L5, li.L7, li.L9 { background: #f6f6f6 }


А для не ленивых — на гуглокоде есть несколько тем
5. Ну и напоследок не забываем произвести перестроение публикаций, для того, чтобы исходный код в новостях везде имел положенный вид.

Дополнение от BR0kEN
Первые два пункта взять из инструкции, а третий заменить на описанный ниже.
1. Открыть файл index.php и найти код:

if (strpos ( $tpl->result['content'], "<pre><code>" ) !== false) {
    $js_array[] = "engine/classes/highlight/highlight.code.js";
    $ajax .= <<<HTML
$(function(){
    $('pre code').each(function(i, e) {hljs.highlightBlock(e, null)});
});
HTML;
}

2. Заменить его на:

if (strpos ( $tpl->result['content'], "<pre class=\"prettyprint linenums\">" ) !== false) {
    $js_array[] = "engine/classes/highlight/prettify.js";
    $ajax .= <<<HTML
    $(function(){prettyPrint();});
HTML;
}

Таким образом скрипт подсветки синтаксиса будет подгружаться только на тех страницах где был использован тег [ code ].

 Скриншоты

Авторизация в новом окне [DLE 9.0-10.0]

HotGirls [DLE 9.8]