Офис НП AMWAY в Ярославле
Купить продукцию Амвей в Ярославле, офис Amway
На карте Купить AMWAY: офис в ЯрославлеКонсультации, презентации, мастер–классы, знакомство с продукцией, заказ и выдача купленного товара:
Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
Телефон: +7 (920) 112-00-91
Email: matyxho@mail.ru
Сайт: https://www.amway.ru/user/lebedem
Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » Программирование » Подключение и настройка SyntaxHighlighter
Сниппет
SyntaxHighlighter- это фреймворк для подсветки синтаксиса на твоем ресурсе. Попробуем разобраться, как его подключить и настроить.
Подключение и настройка SyntaxHighlighter
Опубликовал  Pisatel Добавлено  04-04-2013 18:14 04 Апрель 2013 18:14:08 9257  Прочтений 9257 Прочтений  9 Комментариев 9 Комментариев
 printer

Подключение и настройка SyntaxHighlighter


Очень много ресурсов, в том числе и весьма популярных, используют данную библиотеку для подсветки кода синтаксиса. Почему же именно ее?
- Действия выполняются на стороне клиента, следовательно, снижается нагрузка на сервер
- Богатый выбор языков программирования для подсветки синтаксиса
- Несколько шаблонов тем, которые можно без труда подстроить под дизайн твоего сайта
- Гибкие настройки (файл shCore.js).
Итак, сначала качаем официальный архив SyntaxHighlighter, распаковываем. В принципе, нам нужны будут только папки scripts и styles.

Подключение


До закрывающего тега < /head > произведем подключение основных и языковых файлов.
Код: HTML
<script type='text/javascript' src='scripts/shCore.js'></script>
<script type='text/javascript' src='scripts/shBrushJScript.js'></script>
<link type='text/css' rel='Stylesheet' href='styles/shCore.css'/>
<link type='text/css' rel='Stylesheet' href='styles/shThemeDefault.css'/>
<script type='text/javascript'>
SyntaxHighlighter.all();
</script>



В принципе, подключение уже есть: мы подключили файл настроек, тему по умолчанию (ты можешь выбрать другую), и один из файлов подсветки синтаксиса, а именно- JavaScript. Ты подключи себе те языки, которые будут необходимы, можно подключить все, но тогда страница будет генерироваться чуть дольше. Этого можно избежать, объединив все файлы для подсветки различных языков программирования в один, но об этом- чуть позже.

Динамическая подгрузка необходимых файлов


В данной версии SyntaxHighlighter реализована прекрасная возможность динамической подгрузки необходимых файлов для подсветки различных языков программирования. За это отвечает файл shAutoloader.js. Думаю, грех не воспользоваться столь прекрасным дополнением, как динамическая загрузка. Вот как будет выглядеть теперь наш код подключения:
Код: HTML
<link type='text/css' rel='Stylesheet' href='styles/shCore.css'/>
<link type='text/css' rel='Stylesheet' href='styles/shThemeDefault.css'/>
<script src='scripts/shCore.js' type='text/javascript'></script>
<script src='scripts/shAutoloader.js' type='text/javascript'></script>
<script type='text/javascript'>
SyntaxHighlighter.autoloader(
'js jscript javascript /scripts/shBrushJScript.js',
'applescript /scripts/shBrushAppleScript.js');
SyntaxHighlighter.all();
</script>



В данном примере мы подключили два языка. Руководствуясь этим примером, ты сможешь реализовать динамическую загрузку всех необходимых языков для подсветки. Альясы языков программирования ты легко найдешь через тот же гугл, либо на сайте разработчика SyntaxHighlighter.

Вывод кода для подсветки


Собственно, данный пункт- самый короткий. Все, что нам нужно будет подсветить, просто заключаем в тег < pre > с классом brush и альясом языка, подсветку которого необходимо осуществить, вот пример:
Код: HTML
<pre class='brush: js'>Здесь контент, который необходимо подсветить</pre>



Обьединённые в один файл языки программирования


Однако у себя я сделал немного по-другому: я просто объединил все файлы в один, добавил подключение регистрационного файла (дабы все было по-честному). Скачать архив SyntaxHighlighter MegaLang ты можешь здесь. Вот как в этом случае будет выглядеть подключение:
Код: HTML
<link type='text/css' rel='stylesheet' href='styles/shCoreEclipse.css'></link>
<link type='text/css' rel='stylesheet' href='styles/shThemeEclipse.css'></link>
<script class='javascript' src='scripts/XRegExp.js'></script>
<script class='javascript' src='scripts/shLegacy.js'></script>
<script class='javascript' src='scripts/shCore.js'></script>
<script class='javascript' src='scripts/shMegaLang.js'></script>
<script type='text/javascript'>
SyntaxHighlighter.all();
</script>



То есть, за одно подключение мы загрузим сразу все языки. Плюс, в последнем архиве файл shCore.js доступен для редактирования настроек- с ними уж ты сам разбирайся. Как видишь, в последнем примере подключена не дефолтная тема, а Eclipse- здесь уж ты сам выбирай, какая для твоего сайта будет лучше.

Скрываемые блоки


Данная полезность позволяет скрывать блоки с кодом, открывая их по клику. Добавь collapse: true к тегу < pre > или < script >, например, вот так:
Код: HTML
<pre class='brush: js; collapse: true'>Здесь контент, который необходимо подсветить и скрыть</pre>



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

Примеры подсветки синтаксиса с помощью SyntaxHighlighter


Ну и в заключении- несколько примеров для наглядности, так сказать.
Пример кода js:
Код: JS
;(function()
{
// CommonJS
SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);

function Brush()
{
var keywords = 'AddHandler AddressOf AndAlso Alias And Ansi As Assembly Auto ' +
'Boolean ByRef Byte ByVal Call Case Catch CBool CByte CChar CDate ' +
'CDec CDbl Char CInt Class CLng CObj Const CShort CSng CStr CType ' +
'Date Decimal Declare Default Delegate Dim DirectCast Do Double Each ' +
'Else ElseIf End Enum Erase Error Event Exit False Finally For Friend ' +
'Function Get GetType GoSub GoTo Handles If Implements Imports In ' +
'Inherits Integer Interface Is Let Lib Like Long Loop Me Mod Module ' +
'MustInherit MustOverride MyBase MyClass Namespace New Next Not Nothing ' +
'NotInheritable NotOverridable Object On Option Optional Or OrElse ' +
'Overloads Overridable Overrides ParamArray Preserve Private Property ' +
'Protected Public RaiseEvent ReadOnly ReDim REM RemoveHandler Resume ' +
'Return Select Set Shadows Shared Short Single Static Step Stop String ' +
'Structure Sub SyncLock Then Throw To True Try TypeOf Unicode Until ' +
'Variant When While With WithEvents WriteOnly Xor';

this.regexList = [
{ regex: /'.*$/gm, css: 'comments' }, // one line comments
{ regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // strings
{ regex: /^\s*#.*$/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // vb keyword
];

this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags);
};

Brush.prototype = new SyntaxHighlighter.Highlighter();
Brush.aliases = ['vb', 'vbnet'];

SyntaxHighlighter.brushes.Vb = Brush;

// CommonJS
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();



Пример кода css:
Код: CSS
body {
background-attachment: fixed;
background: #6CA4AC url(images/body-bg.png) repeat-x;
color: #003F66;
font: 11px Georgia,Verdana,Tahoma,Arial,Sans-Serif;
margin: 7px 0;
padding: 0;
}

.sf-menu li li {
background-color: #62B0BC;
}
.sf-menu li li li {
background-color: #333;
}
a {
text-decoration: none;
color: #1C666E;
}
a:hover {
text-decoration: none;
color: #200000;
}
a.side {
text-decoration: none;
color: #1C666E;
}
a:hover.side {
text-decoration: none;
color: #200000;
}
.main-container {
width: 100%;
overflow: auto;
}
.outer-container {
width : 940px;
margin-left: auto;
margin-right: auto;
}
.container {
height:100%;
color : #200000;
background: url(images/container.png) repeat-y scroll 0 0 transparent;
padding: 2px;
}

.header {
margin: 0px;
height: 130px;
color: #2A6E9B;
padding: 5px;
}

.banners {
padding:1px;
margin: 1px 10px 0 10px;
}
.sub-header {
font: 12px/1.0em Georgia;
color: #fff;
font-weight: bold;
background-color: #1D7381;
background-image: URL(images/menu.png);
height: 42px;
background-repeat:repeat-x;
}




Пример кода Python:
Код: PYTHON
import xmlrpclib
class CookieTransport(xmlrpclib.Transport):
def __init__(self, SESSION_ID_STRING='SAPE'):
xmlrpclib.Transport.__init__(self)
self.mycookies=None
self.mysessid=None
self.SESSION_ID_STRING = SESSION_ID_STRING
def parseCookies(self,s):
if s is None: return
{self.SESSION_ID_STRING:None}
ret = {}
tmp = s.split(';')
for t in tmp:
coppia = t.split('=')
k = coppia[0].strip()
v = coppia[1].strip()
ret[k]=v
return ret
def request(self, host, handler, request_body, verbose=0):
h = self.make_connection(host)
if verbose:
h.set_debuglevel(1)
self.send_request(h, handler, request_body)
self.send_host(h, host)
if not self.mysessid is None:
h.putheader("Cookie", "%s=%s" % (self.SESSION_ID_STRING,self.mysessid) )
self.send_user_agent(h)
self.send_content(h, request_body)
errcode, errmsg, headers = h.getreply()
if self.mysessid is None:
self.mycookies = self.parseCookies ( headers.getheader('set-cookie') )
if self.mycookies.has_key (self.SESSION_ID_STRING):
self.mysessid = self.mycookies
[self.SESSION_ID_STRING]
if errcode != 200:
raise
xmlrpclib.ProtocolError(host + handler, errcode, errmsg, headers)
self.verbose = verbose try:
sock = h._conn.sock
except AttributeError:
sock = None
return self._parse_response
(h.getfile(), sock)



Пример кода SQL:
Код: SQL
$cat_list_result = dbquery(
'SELECT download_cat_id, download_cat_name
FROM '.DB_DOWNLOAD_CATS.' WHERE '.groupaccess('download_cat_access').'
ORDER BY download_cat_name');




Что ж, наслаждайся! Незаменимая вещь для сайта ВебМастера.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
#1 | Андрей 20 апреля 2013 12:04:29
No Avatar
Гость
здравствуйте. не могу разобраться с автозагрузкой. не работает помогите пожалуйста!
#2 | Pisatel 23 апреля 2013 18:52:04
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Здравствуйте, Андрей! Что именно не получается? Вот вам пример подключения с JQuery, то есть библиотека уже должна быть подключена:
Код: JQUERY
    <script type='text/javascript'>
$(document).ready(function(){
function path(){
var args = arguments, result = [];
for(var i = 0; i < args.length; i++)
result.push(args[i].replace('@', '/scripts/' ) );
return result
};
SyntaxHighlighter.autoloader.apply(null, path(
'applescript @shBrushAppleScript.js',
'actionscript3 as3 @shBrushAS3.js',
'bash shell @shBrushBash.js',
'coldfusion cf @shBrushColdFusion.js',
'cpp c @shBrushCpp.js',
'c# c-sharp csharp @shBrushCSharp.js',
'css @shBrushCss.js',
'delphi pascal @shBrushDelphi.js',
'diff patch pas @shBrushDiff.js',
'erl erlang @shBrushErlang.js',
'groovy @shBrushGroovy.js',
'java @shBrushJava.js',
'jfx javafx @shBrushJavaFX.js',
'js jscript javascript @shBrushJScript.js',
'perl pl @shBrushPerl.js',
'php @shBrushPhp.js',
'text plain @shBrushPlain.js',
'py python @shBrushPython.js',
'ruby rails ror rb @shBrushRuby.js',
'sass scss @shBrushSass.js',
'scala @shBrushScala.js',
'sql @shBrushSql.js',
'ts typescript @shBrushTypeScript.js',
'vb vbnet @shBrushVb.js',
'xml xhtml xslt html @shBrushXml.js'
));
SyntaxHighlighter.all();
});
</script>



Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#3 | irbees2008 22 января 2015 20:42:46
No Avatar
Гость
А как сделать чтобы форматирование текста работало,а то все получается в одну строчку,и выводит все теги br
#4 | Pisatel 23 января 2015 16:02:55
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
irbees2008, Если правильно понял вопрос, и у тебя выводятся теги переноса <br />, берем файл shCore.js, ищем stripBrs : false и заменяем на stripBrs : true. По поводу "в одну строку" немного не понял: перенос как в коде обозначен? Может, спасет стандартная php функция nl2br();?
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#5 | irbees2008 23 января 2015 17:58:38
No Avatar
Гость
Да выводит br и в курсе как убрать,но от этого ничего не меняется,все также в одну строчку,а как там разбить на строки я не понял.
Avatar
Отсутствует
Пользователь
Активный
С 23. января 2015
у меня без подсветки в pre нормально выводит с переводом строк,как только подключаю скрипты,появляется br и все в одну строку,это значит где то в скриптах искать надо?
#7 | Pisatel 24 января 2015 12:28:28
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Может, ты изначально заменяешь <br /> на &lt;br /&gt;, поэтому перенос и не работает? Как ты обрабатываешь исходный текст? В каком виде он записан в базу? Посмотри исходный код страницы, иногда это помогает разобраться.
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
Avatar
Отсутствует
Пользователь
Активный
С 23. января 2015
Разобрался ,мне надо было включит вариант для блогерр,спасибо за подсказки
#9 | Pisatel 24 января 2015 13:51:00
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Всегда пожалуйста.
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL
543 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
3779 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
5719 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
3412 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
35253 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
2663 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
4672 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
5223 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
1921 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
7228 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
3049 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
4486 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
20488 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
2330 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
9936 13 Pisatel
03. апреля 2015