Rainbow.color can highlight code twice? #93

Closed
ccampbell opened this Issue Dec 26, 2012 · 5 comments

Comments

Projects
None yet
2 participants
@ccampbell
Owner

ccampbell commented Dec 26, 2012

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

This comment has been minimized.

Show comment
Hide comment
@ccampbell

ccampbell Dec 26, 2012

Owner

@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.

Owner

ccampbell commented Dec 26, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@josher19

josher19 Dec 27, 2012

@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

  1. 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

  1. 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 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

  1. 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

  1. 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

This comment has been minimized.

Show comment
Hide comment
@ccampbell

ccampbell Dec 27, 2012

Owner

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');
});
Owner

ccampbell commented Dec 27, 2012

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 josher19 referenced this issue in hay/stapes Dec 28, 2012

Closed

Tooltip Docs & IE #27

@josher19

This comment has been minimized.

Show comment
Hide comment
@josher19

josher19 Dec 28, 2012

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.

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 comment has been minimized.

Show comment
Hide comment
@ccampbell

ccampbell Jul 3, 2016

Owner

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

Owner

ccampbell commented Jul 3, 2016

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

@ccampbell ccampbell closed this Jul 3, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment