Хаки и Скрипты Next Generation CMS : Интерфейс, Диалоги и lightbox : Вот еще один скрипт подсветки кода использующий SyntaxHighlighter

irbees2008 Опубликовано - 5 - января Интерфейс

Адаптировал: irbees2008
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Этоту подсветку кода используют большинство сайтов,сегодня обьясню как поставить эту подсветку на NG.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем в папку с шаблоном.
2.В хеад подключаем стили скрипты:

Код:

01<script src="{{ tpl_url }}/scripts/shCore.js"></script>
02 <script src="{{ tpl_url }}/scripts/shBrushBash.js"></script>
03 <script src="{tpl_url}/scripts/shBrushCpp.js"></script>
04 <script src="{{ tpl_url }}/scripts/shBrushCSharp.js"></script>
05 <script src="{{ tpl_url }}/scripts/shBrushCss.js"></script>
06 <script src="{{ tpl_url }}/scripts/shBrushDelphi.js"></script>
07 <script src="{{ tpl_url }}/scripts/shBrushDiff.js"></script>
08 <script src="{{ tpl_url }}/scripts/shBrushGroovy.js"></script>
09 <script src="{{ tpl_url }}/scripts/shBrushJava.js"></script>
10 <script src="{{ tpl_url }}/scripts/shBrushJScript.js"></script>
11 <script src="{{ tpl_url }}/scripts/shBrushPhp.js"></script>
12 <script src="{{ tpl_url }}/scripts/shBrushPlain.js"></script>
13 <script src="{{ tpl_url }}/scripts/shBrushPython.js"></script>
14 <script src="{{ tpl_url }}/scripts/shBrushRuby.js"></script>
15 <script src="{{ tpl_url }}/scripts/shBrushScala.js"></script>
16 <script src="{{ tpl_url }}/scripts/shBrushSql.js"></script>
17 <script src="{{ tpl_url }}/scripts/shBrushVb.js"></script>
18 <script src="{{ tpl_url }}/scripts/shBrushXml.js"></script>
19 <link rel="stylesheet" href="{{ tpl_url }}/styles/shCore.css"/>
20 <link rel="stylesheet" href="{{ tpl_url }}/styles/shThemeDefault.css"/>
21 <script>
22  SyntaxHighlighter.config.clipboardSwf = '{{ tpl_url }}/scripts/clipboard.swf';
23  SyntaxHighlighter.config.bloggerMode = true;
24  SyntaxHighlighter.config.stripBrs = true;
25  SyntaxHighlighter.all();
26 </script>

3. Вариант 1.Идем в директорию Идем в директорию /engine/includes/classes и открываем файл parse.class.php и ищем код

Код:

1// Special BB tag [code] - blocks all other tags inside
2 while (preg_match("#\[code\](.+?)\[/code\]#ies", $content, $res)) {
3  $content = str_replace($res[0], '<pre>'.str_replace(array('[', '<'), array('[', '<'), $res[1]).'</pre>', $content);
4 }
5 
6 //$content = preg_replace("#\[code\](.+?)\[/code\]#is", "<pre>$1</pre>",$content);

и заменяем на

Код:

1// Special BB tag [code] - blocks all other tags inside
2 while (preg_match("#\[code\](.+?)\[/code\]#ies", $content, $res)) {
3  $content = str_replace($res[0], '<div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Код:</div><div class="code_sample"><pre class="brush: html;">
4'.str_replace(array('[', '<','{','/'), array('[', '<','{','/'), $res[1]).'</pre></div>', $content);
5 }
6 //$content = preg_replace("#\[code\](.+?)\[/code\]#is", "<pre>$1</pre>",$content);

В этом варианте будет обрабатываться '['code] только как html

и Вариант 2
Открываем engine/includes/classes/parse.class.php. Наш тег [ code ] будет использоваться так - [ code=<язык> ], поэтому будем изменять регулярку. Ищем такой фрагмент:

Код:

`1`	`// Special BB tag [ code] - blocks all other tags inside while (preg_match("#\[code\](.+?)\[/code\]#ies", $content, $res))`

`2`	`{$content` `=` `str_replace($res[0],` `'<pre>'.str_replace(array('[',` `'<'),` `array('[',` `'<'),` `$res[1]).'</pre>',` `$content); }`

И меняем на:

Код:

1// Special BB tag [ code] - blocks all other tags inside
2// assd: replaced: [code\] => [code=(.*?)\] | '<pre>' => '<pre class="brush:'.$res[1].'">' | $res[1]).'</pre>' => $res[2]).'</pre>'
3 while (preg_match("#\[code=(.*?)\](.+?)\[/code\]#ies", $content, $res))
4 {$content = str_replace($res[0], '<pre class="language-'.$res[1].'">'.str_replace(array('[', '<'),  array('[', '<'), $res[2]).'</pre>', $content);
5 $content = str_replace('
6', "\n", $content);
7        }

и ниже добавляем

Код:

1#Added to prevent adding s in highlighted code
2        preg_match_all("#<pre class=\\\"brush: (.*?)\\\">(.+?)</pre>#ies", $content, $ress);
3        foreach ($ress as $res) {
4            $content = str_replace($res[0],str_replace('<br />', "\n", $res[0]),$content);
5        }

Далее добавляем кнопки в редактор добавления новости
Идем в директорию /engine/skins/default/tpl и открываем файл qt_news.tpl .
Ищем код

Код:

`1`	`<span` `onclick="insertext('[code]','[/code]', {area})"` `title='{l_tags.code}'><i` `class="fa fa-code"></i></span>`

и меняем на этот

Код:

1<span onclick="insertext('[code=html]','[/code]', {area})" title='Вставка HTML'>HTML</span>
2  <span onclick="insertext('[code=css]','[/code]', {area})" title='Вставка CSS'>CSS</span>
3  <span onclick="insertext('[code=js]','[/code]', {area})" title='Вставка JS'>JS</span>
4  <span onclick="insertext('[code=php]','[/code]', {area})" title='Вставка PHP'>PHP</span>
5  <span onclick="insertext('[code=sql]','[/code]', {area})" title='Вставка SQL'>SQL</span>

Конечно заместо слова можно использовать картинку,или шрифтовую иконку.
Сохраняем .

SyntaxHighlighter.настройки

Имеет значения конфигурации, которые являются общими для всех элементов на странице.Ниже приведены эти значения:

Параметр	Значение	Описание
`bloggerMode`	`false`	Интеграция в Blogger. Если сайт у вас на blogger.com или на NG, необходимо включить ее.
`strings`	`Object`	Позволяет изменять сообщения по умолчанию
`stripBrs`	`false`	Если ваш редактор добавляет <br /> тэги в конце каждой строки, эта опция позволяет игнорировать их.
`tagName`	`"pre"`	Облегчает используя другой тег.

Пример

Код:

`1`	`SyntaxHighlighter.config.bloggerMode = true;`

`2`	`SyntaxHighlighter.all();`

Ниже приведены дополнительные параметры настройки плагина SyntaxHighlighter:

Параметр	Значение по умолчанию	Описание
auto-links	true	Определяет, нужно ли подсвечивать ссылки в коде и делать их кликабельными
*class-name*	‘ ‘	Позволяет добавить класс пользователя
collapse	false	Свернутый код
*first-line*	1	Определяет номер первой строки
gutter	true	Включает/выключает вертикальную линейку
highlight	null	Подсвечивает одну или несколько строчек кода
html-script	false	Позволяет подсветку разного HTML/XML кода
light	false	Включает/выключает вертикальную и горизонтальную линейки
smart-tabs	true	Функция wrap – включить полосу прокрутки (если длинный код)
tab-size	4	Размер табуляции
toolbar	true	Включает/выключает панель помощи
wrap-lines	true	Включает smart-табуляцию
ruler	false	Вставляет горизонтальную линейку

Основными значениями параметров являются общепринятые логические типы данных true (правда) и false (ложь).
То есть true – да или false – нет .

Пример

Код:

1SyntaxHighlighter.defaults['gutter'] = false;
2       SyntaxHighlighter.defaults['smart-tabs'] = false;
3       ...
4       SyntaxHighlighter.all();

Вроде все пользуемся.
В стили надо добавить

Код:

1.code_sample {border: 1px solid #DADADA;
2font-size: 12px;
3margin-bottom: 10px;
4margin-top: 10px;}

Можешь почитать и вот эту статейку "Плагин wysiwyg с моими добавлениями и правками"

Это тоже интересно

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