3572
- 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>
Код:
// 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);
и Вариант 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;}
Можешь почитать и вот эту статейку "Добавляем свои функции в стандартный bb- редактор для оформления новости"
Это тоже интересно
- 06.02.13Скрипт выделение текста,кода ..
- 20.09.15Подсветка синтаксиса в статьях
- 13.08.13Notepad++
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.