• 2076
  • 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 и ищем код
Код:
 // 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.настройки

Имеет значения конфигурации, которые являются общими для всех элементов на странице.Ниже приведены эти значения:
ПараметрЗначениеОписание
phphighlight('bloggerMode')phphighlight('false')Интеграция в Blogger. Если сайт у вас на blogger.com или на NG, необходимо включить ее.
phphighlight('strings')phphighlight('Object')Позволяет изменять сообщения по умолчанию
phphighlight('stripBrs')phphighlight('false')Если ваш редактор добавляет <br /> тэги в конце каждой строки, эта опция позволяет игнорировать их.
phphighlight('tagName')phphighlight('"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;}

Можешь почитать и вот эту статейку "Хак- Применение внешних файлов в main.tpl "

mistakes

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

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

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

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