Подсветка синтаксиса с помощью Highlight.js

Страница 1 из 1
1

Подсветка синтаксиса с помощью Highlight.js (sml[hot])

Сикарашка

09.06.2010, Среда в 19:57

Сообщение #1

Официальная страничка -http://alexgorbatchev.com/wiki....]

Создаем в корне сайта папку [b]highlight и загружаем туда содержимое этого архива [color=blue]highlight.zip
Теперь открываем шаблон Форум - Общий вид страниц форума
и между <head> и </head> ставим этот код

Code

<?if($PAGE_ID$="threadpage")?>
<link type="text/css" rel="stylesheet" href="/highlight/styles/default.css" />
<script type="text/javascript" src="/highlight/highlight.js"></script>
<?endif?>

где default.css можно заменить на ascetic.css, dark.css, far.css, idea.css, sunburst.css, zenburn.css при этом подсветка кода будет другая
находим $BODY$ и сразу после него ставим этот код

Code

<?if($PAGE_ID$="threadpage")?><script type="text/javascript" src="/highlight/highlightForUcoZ.js"></script><?endif?>

теперь шаблон Форум - Форма добавления сообщения и в любое место ставим этот код

Code

Подсветка вызывается бб-кодом [highlight][/highlight]

Чтобы уменьшить таблицу вывода подсветки добавьте в CSS этот код

Code

pre {width: 640px; overflow: auto;}

Вот скрипт который будет работать под BB-Kодом code, нужно тогда все что есть в файле highlightForUcoZ.js заменить на

Code

// By AllCity - http://allcity.net.ru/
jQuery('div.bbCodeBlock').each(function(){
code = jQuery(this).find('div.codeMessage').html();
code = code.replace(/<br>/ig,'\r\n');
code = code.replace(//ig,'');
code = code.replace(//ig,'');
jQuery(this).replaceWith('<pre><code>'+code+'</code></pre>');
});

hljs.initHighlightingOnLoad(); // Чтобы ускорить процесс загрузки, можно перечислить в вызове инициализирующей функции только те языки, которые вам нужны, смотрим файл readme.rus.txt!

Для работы этого скрипта нужен jQuery.

Сикарашка

09.06.2010, Среда в 20:26

Сообщение #2

1. Качаем этот архив
SyntaxHighlighter.zip
потом создаем папку с названиям SyntaxHighlighter и кидаем туда все файлы с архива кроме папки Uncompressed она для разработчиков
2. Управление дизайном » Редактирование шаблонов Форум - Общий вид страниц форума
Между <head> и </head> ставим

Code

<?if($PAGE_ID$="threadpage")?>
<link type="text/css" rel="stylesheet" href="/SyntaxHighlighter/SyntaxHighlighter.css"></link>
<script language="javascript" src="/SyntaxHighlighter/shCore.js"></script>
<script language="javascript" src="/SyntaxHighlighter/shBrushJScript.js"></script>
<script language="javascript" src="/SyntaxHighlighter/shBrushXml.js"></script>
<?endif?>

находим $BODY$ и сразу после него ставим этот код

Code

<?if($PAGE_ID$="threadpage")?>
<script language="javascript" src="/SyntaxHighlighter/shForUcoZ.js"></script>
<?endif?>

Кто хочет может обновить содержимое файла shForUcoZ.js все что там есть замените на

Code

// By Helper.UcoZ.Ru FixeD & RipeD By AllCity....
allDivs = document.getElementsByTagName('div');
for(i=0;i<allDivs.length;i++){
if(allDivs[i].className=='bbCodeBlock'){
code = allDivs[i].childNodes[1].innerHTML
while(allDivs[i].childNodes.length>0) allDivs[i].removeChild(allDivs[i].childNodes[0]);
code = code.replace(/<br>/gi,'\r\n'); // В IE не работает и за этого и не переводятся строки!
code = code.replace(//gi,'');
code = code.replace(//gi,'');
pre = document.createElement('pre');
pre.setAttribute('name','code');
pre.className = 'js';
pre.innerHTML = code;
allDivs[i].appendChild(pre);
}}

dp.SyntaxHighlighter.ClipboardSwf = '/SyntaxHighlighter/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');

эта версия уже работает в IE но остался мини баг с переводом строк кто хочет может помочь исправить

но если у вас подключен jQuery то вот нормальная версия скрипта (работает в IE, FF3, OPERA).

Code

// By AllCity - http://allcity.net.ru/
jQuery('div.bbCodeBlock').each(function(){
code = jQuery(this).find('div.codeMessage').html();
code = code.replace(/<br>/ig,'\r\n');
code = code.replace(//ig,'');
code = code.replace(//ig,'');
jQuery(this).replaceWith('<pre name="code" class="js">'+code+'</pre>');
});

dp.SyntaxHighlighter.ClipboardSwf = '/SyntaxHighlighter/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');

чтобы исправить стили и ширину подсвеченного текста подправьте код в файле SyntaxHighlighter.css в самом первом блоке

Code

.dp-highlighter
{
    font-family: "Consolas", "Courier New", Courier, mono, serif;
    font-size: 12px;
    background-color: #fedd82;
    width: 600px;
    overflow: auto;
    margin: 18px 0 18px 0 !important;
    padding-top: 1px; /* adds a little border on top when controls are hidden */
}

Сикарашка

09.06.2010, Среда в 20:38

Сообщение #3

Вот скрипт для тех кто хочет чтоб подсветка работала например под другим BB-кодом.
Содержимое файла shForUcoZ.js полностью заменяем на

Code

// By AllCity ~ AllCity.Net.Ru
e=document.getElementsByTagName("td");
for(k=0;k<e.length;k++) {
if(e[k].className=='posttdMessage') {
s=e[k].innerHTML;
while (s.indexOf('[syntax]') != -1) {
s=s.replace(/<br>/gi,'\r\n');
if(navigator.userAgent.indexOf('IE')!=-1) {
s=s.replace(/<p>/gi,'\r\n');
s=s.replace(/<\/p>/gi,'\r\n');
} else {
s=s.replace(/<p>/gi,'\r\n\n');
s=s.replace(/<\/p>/gi,'\r\n\n');
}
s=s.replace('[syntax]','<pre name="code" class="js">');
s=s.replace('[\/syntax]','</pre>');
e[k].innerHTML=s;
}}}

dp.SyntaxHighlighter.ClipboardSwf = '/SyntaxHighlighter/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');

и в форму добавления сообщения в любое место ставим этот код кнопки

Code

UPDATE
Русификация скрипта
Откраиваем файл shCore.js и находим там

Code

<title>About...</title>

заменяем на

Code

<title>О скрипте...</title>

Code

<div class="para">Version: {V}</p>

на

Code

<div class="para">Версия: {V}</p>

Code

на

Code

<a href="http://www.dreamprojections.com/syntaxhighlighter/?ref=about" target="_blank">http://www.dreamprojections.com/syntaxhighlighter</a><br><a href="http://allcity.net.ru/" target="_blank">http://allcity.net.ru/</a></p>©2004-2007 Alex Gorbatchev.<br>Русификация от AllCity © 2005-2008.</td>

Code

{label:'view plain',func:function(sender,highlighter)

на

Code

{label:'исходный код',func:function(sender,highlighter)

Code

{label:'copy to clipboard',

на

Code

{label:'скопировать в буфер обмена',

Code

alert('The code is in your clipboard now')

на

Code

alert('Код успешно скопирован в буфер обмена')

Code

PrintSource:{label:'print',func:function(sender,highlighter)

на

Code

PrintSource:{label:'печать',func:function(sender,highlighter)

Code

alert('Printing...')

на

Code

alert('Печатается...')

Сикарашка

09.06.2010, Среда в 20:48

Сообщение #4

Обновление SyntaxHighlighter'а
1. Удалить все что есть в папке SyntaxHighlighter кроме shForUcoZ.js файла и закачать туда содержимое этого архива:
syntaxhighlighter_2.0.287_for_ucoz_update.zip
2. Весь код что мы ставили в HEAD заменяем на этот:

Code

3. В файле shForUcoZ.js найти:

Code

dp.SyntaxHighlighter.ClipboardSwf = '/SyntaxHighlighter/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');

заменить на:

Code

SyntaxHighlighter.all();
dp.SyntaxHighlighter.HighlightAll('code');

Версия обновления номер 2 (рекомендую)
1. Удалить все что есть в папке SyntaxHighlighter кроме shForUcoZ.js файла и закачать туда содержимое этого архива:
syntaxhighlighter_2.0.287_for_ucoz_update.zip
2. Весь код что мы ставили в HEAD заменяем на этот:

Code

3. В файле shForUcoZ.js найти (для любых версии этого файла) :

Code

dp.SyntaxHighlighter.ClipboardSwf = '/SyntaxHighlighter/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');

заменить на:

Code

SyntaxHighlighter.all();

4. В файле shForUcoZ.js найти:

Code

pre.setAttribute('name','code');
pre.setAttribute('class','js');

заменить на:

Code

pre.setAttribute('class','brush:js');

или

Code

pre.setAttribute('name','code');
pre.className = 'js';

на

Code

pre.className = 'brush:js';

или

Code

на

Code

Подсветка синтаксиса с помощью Highlight.js (sml[hot])

Страница 1 из 1
1