Rainbow.color can highlight code twice?

[ccampbell]

From @josher19

Somewhat related: I have a script which modifies the DOM after the rainbowcode highlighting is completed by adding tooltips and a Table of Contents.

Right now I'm doing a setTimeout because when I tried an onload listener it was called before the rainbow code was completed. Doing Rainbow.color(callback) means > that the highlighting happens twice (once when called by my code and once by the document 'onload' listener). Any further suggestions? Really want a Rainbow.ready> (> callback) jQuery-type of function that will call the function immediately if Rainbow code has already completed parsing the DOM.>

Any further suggestions? Should I add it to the code and make a pull request?

[ccampbell]

@josher19 The code highlighting should not happen more than once if you call color a second time. A rainbow class is added to each block that gets highlighted for this reason:

https://github.com/ccampbell/rainbow/blob/master/js/rainbow.js#L621-L624

It is possible that there might be some sort of race condition causing both color calls to start highlighting before having the rainbow class, but that seems somewhat unlikely.

Do you have an example page?

I have an api test page here, but I use timeouts that might not be fast enough to reproduce.

https://github.com/ccampbell/rainbow/blob/master/tests/api.html

If there is no other solution, then your Rainbow.ready approach seems like a simple way to solve the problem.

[josher19]

@ccampbell Not exactly a minimal example ...

I'm working on a documentation module that uses CSS Tooltips to show documented methods and functions. Right now, I'm using your excellent module to render the page, and then adding a Table of Contents and Tooltips dynamically.

I want to call two other functions after RainbowCode has finished highlighting the page.
It looks like doing it using Rainbow.color causes the toc and startDocs code to fire before RainbowCode has completed highlighting the page, so their queries for document.querySelectorAll('code span.function') return 0 results.

// in toc.js:
Rainbow.color(toc); // create table of contents
// in other js file:
Rainbow.color(startDocs); // add tooltips

1. Sometimes it works when the callback happens after document.load or a long timeout (1200ms),
   sometimes it does not (until the page is refreshed):

http://josher19.github.com/minidocs/examples/brocco_ok.html

2. In this one, tooltips don't work:

http://josher19.github.com/minidocs/examples/brocco_broken.html

Click: insertHtmlIntoBody on the left.
Should see tooltip when you put your mouse over "scrollLocationHashIntoView"
(except on IE). Relevant files are toc.js and brocco_docs.js

3. An example that works using an older version of RainbowCode and timeouts: Stapes.

Once this is working smoothly, I'd be interested in making this a plugin for RainbowCode.

[ccampbell]

The tooltips are not working for me on either version. Have you tried using Rainbow.onHighlight? This is how I do the highlighting on the demo page http://rainbowco.de. You could do something like:

Rainbow.onHighlight(function(block, language) {
    $("span.function", block).addClass('tooltip');
});

[josher19]

Updated brocco_ok.html and added http://josher19.github.com/minidocs/examples/rainbow.html
with TOC for all .function.names and Tooltip docs for all .function.calls.

[ccampbell]

This should be resolved in version 2.0 (#196). Please reopen if it is still an issue