Подсветка кода с помощью Google-Code для DLE 9.x — 10.x » Techno-Co — Всё для вебмастера, для создание сайтов с нуля. {title}

18.03.2015
Без рубрики

Небольшой хак для dle, позволяющий организовать подсветку синтаксиса кода с помощью Google Code Prettify всеми любимой и проверенной библиотеки от гугла.Подсветка синтаксиса с помощью Google Code Prettify1. Качаем последнюю сжатую (несжатая нам в принципе нафиг не нужна) версию скрипта подсветки синтаксиса с google-code-prettify (на данный момент это версия от 4 марта 2013 года.) Заливаем файлы в нужные папки шаблона CSS — к CSS, js — к js.

2. Открываем файл engine/classes/parse.class.php

Находим код:

$source = preg_replace( "#[code](.+?)[/code]#is", "1", $source );

меняем на:

$source = preg_replace( "#[code](.+?)[/code]#is", "
1
", $source );

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


$(function(){prettyPrint();});

слово ПУТЬ меняем на нужный путь к файлу 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'], "
" ) !== false) {

    $js_array[] = "engine/classes/highlight/highlight.code.js";

    $ajax .=