Хаки и Скрипты 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;}

Можешь почитать и вот эту статейку "Тег map "

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

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