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

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

Адаптировал: 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 и ищем код

Код:

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

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

и заменяем на

Код:

 // Special BB tag [code] - blocks all other tags inside
		while (preg_match("#\[code\](.+?)\[/code\]#ies", $content, $res)) {
			$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;">
 '.str_replace(array('[', '<','{','/'), array('[', '<','{','/'), $res[1]).'</pre></div>', $content);
		}
		//$content	=	preg_replace("#\[code\](.+?)\[/code\]#is", "<pre>$1</pre>",$content);

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

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

Код:

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

И меняем на:

Код:

// Special BB tag [ code] - blocks all other tags inside
// assd: replaced: [code\] => [code=(.*?)\] | '<pre>' => '<pre class="brush:'.$res[1].'">' | $res[1]).'</pre>' => $res[2]).'</pre>'
 while (preg_match("#\[code=(.*?)\](.+?)\[/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('
', "\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-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 – нет .

Пример

Код:

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;}

Можешь почитать и вот эту статейку "Советы как бесплатно раскрутить свой сайт"

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

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