Хаки и Скрипты Next Generation CMS

Вот еще один скрипт подсветки кода использующий SyntaxHighlighter

  1. Главная страница
  2. Интерфейс
  3. Диалоги и lightbox
irbees2008 irbees2008 Опубликовано - 5 - января Интерфейс
4131 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

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

Код:
<script src="{{ tpl_url }}/scripts/shCore.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushBash.js"></script>
	<script src="{tpl_url}/scripts/shBrushCpp.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushCSharp.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushCss.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushDelphi.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushDiff.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushGroovy.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushJava.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushJScript.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushPhp.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushPlain.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushPython.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushRuby.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushScala.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushSql.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushVb.js"></script>
	<script src="{{ tpl_url }}/scripts/shBrushXml.js"></script>
	<link rel="stylesheet" href="{{ tpl_url }}/styles/shCore.css"/>
	<link rel="stylesheet" href="{{ tpl_url }}/styles/shThemeDefault.css"/>
	<script>
		SyntaxHighlighter.config.clipboardSwf = '{{ tpl_url }}/scripts/clipboard.swf';
		SyntaxHighlighter.config.bloggerMode = true;
		SyntaxHighlighter.config.stripBrs = true;
		SyntaxHighlighter.all();
	</script>
3. Вариант 1.Идем в директорию Идем в директорию /engine/includes/classes и открываем файл parse.class.php и ищем код
[code=php] // Special BB tag [code] - blocks all other tags inside
while (preg_match("#\[code\](.+?)\[/code\]#ies", $content, $res)) {
$content = str_replace($res[0], '
'.str_replace(array('[', '<'), array('[', '<'), $res[1]).'
', $content);
}

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

и заменяем на

[code=php] // Special BB tag [code] - blocks all other tags inside
while (preg_match("#\[code\](.+?)\[/code\]#ies", $content, $res)) {
$content = str_replace($res[0], '
Код:
 '.str_replace(array('[', '<','{','/'), array('[', '<','{','/'), $res[1]).'
', $content);
}
//$content = preg_replace("#\[code\](.+?)\[/code\]#is", "
$1
",$content);[/code]
В этом варианте будет обрабатываться '['code] только как html

и Вариант 2
Открываем engine/includes/classes/parse.class.php. Наш тег [ code ] будет использоваться так -  [ code=<язык> ], поэтому будем изменять регулярку. Ищем такой фрагмент:
[code=php]
// Special BB tag [ code] - blocks all other tags inside while (preg_match("#\[code\](.+?)\[/code\]#ies", $content, $res))
{$content = str_replace($res[0], '
'.str_replace(array('[', '<'), array('[', '<'), $res[1]).'
', $content); }
[/code]
И меняем на:
[code=php]
// Special BB tag [ code] - blocks all other tags inside
// assd: replaced: [code\] => [code=(.*?)\] | '
' => '
' | $res[1]).'
' => $res[2]).'
'
while (preg_match("#\
Код:
(.+?)[/code]#ies", $content, $res))
 {$content = str_replace($res[0], '<pre class="language-'.$res[1].'">'.str_replace(array('[', '<'),  array('[', '<'), $res[2]).'</pre>', $content);
 $content = str_replace('<br>', "\n", $content);
        }
и ниже добавляем
Код:
#Added to prevent adding s in highlighted code
        preg_match_all("#<pre class=\\\"brush: (.*?)\\\">(.+?)</pre>#ies", $content, $ress);
        foreach ($ress as $res) {
            $content = str_replace($res[0],str_replace('<br />', "\n", $res[0]),$content);
        }
Далее добавляем кнопки в редактор добавления новости
Идем в директорию /engine/skins/default/tpl и открываем файл qt_news.tpl .
Ищем код
Код:
<span onclick="insertext('[code]','[/code]', {area})" title='{l_tags.code}'><i class="fa fa-code"></i></span>
и меняем на этот
Код:
<span onclick="insertext('[code=html]','[/code]', {area})" title='Вставка HTML'>HTML</span>
  <span onclick="insertext('[code=css]','[/code]', {area})" title='Вставка CSS'>CSS</span>
  <span onclick="insertext('[code=js]','[/code]', {area})" title='Вставка JS'>JS</span>
  <span onclick="insertext('[code=php]','[/code]', {area})" title='Вставка PHP'>PHP</span>
  <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"
Облегчает используя другой тег.
Пример
Код:
	SyntaxHighlighter.config.bloggerMode = true;
      	SyntaxHighlighter.all();

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

ПараметрЗначение по умолчаниюОписание
auto-linkstrueОпределяет, нужно ли подсвечивать ссылки в коде и делать их кликабельными
class-name‘   ‘Позволяет добавить класс пользователя
collapsefalseСвернутый код
first-line1Определяет номер первой строки
guttertrueВключает/выключает вертикальную линейку
highlightnullПодсвечивает одну или несколько строчек кода
html-scriptfalseПозволяет подсветку разного HTML/XML кода
lightfalseВключает/выключает вертикальную и горизонтальную линейки
smart-tabstrueФункция wrap – включить полосу прокрутки (если длинный код)
tab-size4Размер табуляции
toolbartrueВключает/выключает панель помощи
wrap-linestrueВключает smart-табуляцию
rulerfalseВставляет горизонтальную линейку

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

Пример
Код:
SyntaxHighlighter.defaults['gutter'] = false;
      	SyntaxHighlighter.defaults['smart-tabs'] = false;
      	...
      	SyntaxHighlighter.all();
Вроде все пользуемся.
В стили надо добавить
Код:
.code_sample {border: 1px solid #DADADA;
font-size: 12px;
margin-bottom: 10px;
margin-top: 10px;}

Можешь почитать и вот эту статейку "Как увидеть пароль, скрытый звёздочками?"

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

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

Популярное

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Ссылки

Обновленное

Архив

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйт cущecтвуeт: 4763 дня
  • Статических страниц: 10
  • Категорий: 28
  • Новостей: 620
  • Неопубликованных новостей: 8
  • Комментариев: 1
  • Зарегестрированных пользователей: 783
  • Онлайн всего: [8]
  • Гости: [7]
  • Поисковые роботы: [1] Яндекс
  • Сегодня нас посетили: [6] Larrytitly, irbees2008, Google, dankeanke, Яндекс, Arnoldimamy
  • SQL запросов: 39
  • Генерация страницы: 0.108сек
  • Потребление памяти: 9.131 Mb 
  •   Яндекс.Метрика