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

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

mistakes

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

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

Ваше мнение

какой форум лучше для вас
Результаты

Облако тегов

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