CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2133694
user2133694

Reputation: 23

Syntax highlighter not working when in a div container

I am trying to use Luminous syntax highlighter to highlight some code on my website. It works well, but if i want to put the by Luminous generated div in another div to place it on my site, the line number toggle button does not appear anymore. Tried several hours changing stuff in css files, but had no success after all.

Here is a small example: http://siach.tipido.net/

I think you can see all needed files, such as js, css, html... Please ask if you have more questions about it. I think the problem is located in the JS/Jquery, since i am very bad at that...

Upvotes: 0

Views: 90

Answers (1)

pixshatterer
pixshatterer

Reputation: 1029

The issue is due to a miscalculation in luminous.js file.

Check line 182:

 if (ev.pageX < gutterWidth) {

In my opinion, this assumption is incorrect... basically, as the div you are using as container uses a margin of 30px, therefore the component is moved to the right... so the ev.pageX is always greater than the gutterWidth not showing the desired component, because the amount of pixels moved to the right is not subtracted from it.

The fix, should be replace the line mentioned above, for this one:

if ((ev.pageX - $(this).offset().left) < gutterWidth) {

As you can see in this demo

Upvotes: 3

Related Questions