Скрипт для примеров

[Vlad]

В разделе "Теги HTML" на этом сайте используется скрипт для просмотра примеров. Он работает на основе тега <pre>. Но теперь у меня поменялся скрипт для подсветки синтаксиса и примеры выводятся через <pre><code>. Естественно, нынешний скрипт не работает, поэтому прошу помощи для его модификации.

function init(id)
{
itm = null;
if ( document.getElementById ) itm = document.getElementById( id );
else if ( document.all ) itm = document.all[ id ];
else if ( document.layers ) itm = document.layers[ id ];
return itm;
};


function insertAfter(newElement, targetElement)
{
var parent = targetElement.parentNode;
if(parent.lastchild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}

function sendCode(id, newwin)
{
	init('codetext').value = init(id).innerHTML;
	if (newwin == 1) { init('codeform').setAttribute("target", "_blank"); }
	init('codeform').submit();	
}


pres = document.getElementsByTagName('pre');

for (var i=0;i<pres.length;i++) {
pres[i].id = 'example_'+i+'_c';

try {
	button = document.createElement('<div class="example-view">');
} catch (e) {
	button = document.createElement('div');
	button.setAttribute('class', "example-view");
}

  button.innerHTML = '<img onclick="sendCode(\''+pres[i].id+'\', 0)" src="/images/example.gif" title="Пример в текущем окне" alt="Посмотреть пример" class="example-win"><br><img onclick="sendCode(\''+pres[i].id+'\', 1)" src="/images/example2.gif" title="Пример в новом окне" alt="Посмотреть пример" class="example-win">';
  button.style.cursor = 'pointer';

  insertAfter(button,pres[i]);
}

[Yarik Voronov]

В разделе "Теги HTML" на этом сайте используется скрипт для просмотра примеров. Он работает на основе тега <pre>. Но теперь у меня поменялся скрипт для подсветки синтаксиса и примеры выводятся через <pre><code>. Естественно, нынешний скрипт не работает, поэтому прошу помощи для его модификации.

Влад, если я правильно понял, старый скрипт делает подстветку через <div><ol><li><span> (_http://www.dreamprojections.com/syntaxhighlighter). в эту структуру внедряется <div> с кнопками показа примера. Новый скрипт формирует подсветку на базе <pre><code> и в него кнопки не внедряются. другой <pre> c исходным кодом как был так и остается. Вопрос. можно получить результирующий код подсветки нового скрипта (<pre><code>)? или хотя бы ссылочку на источник где этот новый скрипт подсветки можно скачать. Надо посмотреть с точки зрения верстки куда там можно внедрить кнопки и вообще какая получается структура тегов.

[Vlad]

Пример работы старого скрипта подсветки можно здесь посмотреть. Код примера выводится через <pre class="html" name="code">...</pre>

http://htmlbook.ru/html/a.html

А вот здесь можно увидеть работу нового скрипта подсветки. Код выводится через <pre><code>...</code></pre>

http://htmlbook.ru/css/opacity.html

Старый скрипт подсветки (брал здесь, кстати: code.google.com/p/syntaxhighlighter) не устраивает по нескольким причинам. Он реально тормозит, файл скрипта занимает много места, код не валидный, а главное - подсветка не работает в случае смешанного кода, когда HTML, СSS и JS вместе встречаются. В новом скрипте указанных недостатков нет. Осталось только модифицировать скрипт, чтобы "прикрутить живые примеры" к коду.

Подсветка синтаксиса взята отсюда

http://softwaremaniacs.org/soft/highlight/

В комплекте прилагается файл export.html через который можно посмотреть конечный код который и отображается через JS.

[Yarik Voronov]

ага. вижу. сейчас буду "ковырять".... Влад, там одна заноза есть. похоже новый скрипт удаляет из дерева <pre><code></code></pre> исходник. распарсивать то что получается "взад" смысла нет - получатся те же тормоза. наверно надо будет подправить скрипт highlight-ра. ушел "ковырять"

[Vlad]

Распарсивать "взад" и PHP может. Нынешний серверный скрипт так и делает, так что с этим проблем нет. Главное - внедрить "кнопочку", как это показано на примере тега А.

[Yarik Voronov]

Влад, вот что получилось:

1. за основу взял расположение кнопок как в разделе html-теги (справа-снизу). получилось вполне нормально в Opera 9.63, FF3. IE6SP2 - отдыхает. Верстальщик из меня так себе, если будут другие варианты расположения кнопок скрипт переделаю.

2. подправил сам скрипт highlight.js (который сжат) теперь он оставляет исходники. перед внесенными исправлениями в скрипте стоит /*/* двойной коментарий.

3. создал новый файл example.js - собственно который добавляет кнопки. к сожалению к нему коментов написать не успеваю... вечером. напишу. может заодно какие новые идеи по поводу оптимизации алгоритма придут.

4. opacity.html - с которого все начинается. opacity.html - это просто сохраненный и подрезанный (пардон) исходник кода и стилей из раздела CSS. в его коде сделал небольшие коментарии. кстати есть маленький нюанс: подключать example.js надо перед highlight.js, а то IE6 не успевает сформировать нужную структуру тегов. скорее всего это можно решить по-другому.

opacity_addButtons.zip

[Vlad]

Спасибо за помощь. Сейчас посмотрю, что получилось.

[Yarik Voronov]

Прилагаю описание структуры исходных данных и алгоритма скрипта example.js

описание сухое и слегка неофициальное.

Влад, пытался по другому сверстать - никак под IE 6 не получается у меня скрыть текст

в теге <pre> (организовать полосу прокрутки). может по-другому кнопки расположить? или пусть ослик отдыхает? Вообще-то еще подумаю, поищу в нете, на форуме.

README_addButtons.zip

[Vlad]

IE6 - фтопку, на сайте он заблокирован.

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

[Yarik Voronov]

Пока разбираюсь со скриптом, все классно сделано, даже то, о чем мечтал только, но не говорил. Только не работает должным образом.

Если работает не должным образом. значит не классно.

Выкладываю два варианта. В версии 1.1 изменил немного алгоритм. readme внутри

В версии 2.0 принципиально переделал алгоритм, подключив новый объект к highlight.js - кнопки добавляются сразу после создания форматированного блока кода. соответственно больше исправлений в highlight.js. readme тоже внутри архива. Все изначальные "неудовлетворительные" блоки в highlight.js закоментированы /**/

В обоих вариантах полностью почистил код-html от исходного форматирования сайта, за исключением необходимых стилей.

addButtons_v1.1.zip

addButtons_2.0.zip

[Vlad]

Все потестировал, работает прекрасно. Спасибо за помощь!

Осталась рутиная работа - проверить все примеры и сделать их "красивыми". На следующей неделе видимо все закончу и анонсирую результат.