The line numbers don’t seem to work at all for me in Firefox even after clearing the cache. They work just fine in Chrome however. I don’t see anything useful in the console.
Good catch. It also doesn’t work on the system browser on Android. Again on Chrome mobile it works.
@anthony the DOM for highlighted code looks quite different in FIrefox compared to Chrome. Any idea what’s going on there? Is some piece of javascript (like linging.js) not doing its job in FF?
I notice that in FF the code
block sometimes has attribute data-lining=''
and sometimes data-lining='end'
. With end
it works, without, it doesn’t. Where is that attribute coming from? Can we influence how it’s set to make sure it always has end
?
Thanks, hopefully fixed, Chrome and FF seem to have different orders of operations when rendering pages so I now have the monkey-patching for data-lining
in two places and hopefully this stays consistent.
Please clear your caches and hard reload to try again. Thanks for reporting @cocreature
EDIT: Hrmm…still broken for me on mobile, will need to look at more.
It is also broken for me on desktop in firefox 75 (I did clear the cache).
I think the important thing will be to set data-lining='end'
before lining.js
is loaded. <script>
tags in the HTML are guaranteed to be executed in order in all browsers, I believe.
Yeah I’m not sure what’s going on at the moment, seems in FF it renders sometimes and not others. Will try to figure out today.
Hey @anthony. I really like the code lines. Unfortunately sometimes it’s still a bit buggy, like in this screenshot:
from Stefano’s question here:
No usage of CSS will go unpunished.
Just to confirm you mean the blank spaces right? Will take a look.
Yeah, between line 7 and 8 in the first block, and between 4 and 5 in the second block
Fixed, still somewhat broken in Firefox which is ridiculous because it’s built on Chrome now but small victories
Thanks a ton.
However I’m surprised that you decided not to number the empty lines as well. But I guess as long as it’s consistent.
Another question, can you please make the solution post stand out a bit more? Right now it’s just the check mark at the bottom of the post, right?
I understand that there is actually a copy of the solution in the original question, but I think making the background of the solution-response be a different color would be helpful as well. Looking at the HTML structure, I don’t know if that is feasible though …
The empty lines are due to the hackish nature in which I need to enable this.
Added a light green background to topics marked as solved. As with the line numbers it works perfectly in Chrome and so far not at all in Firefox. I’m convinced they consider document.ready
differently but I don’t know what the difference is.
@anthony I don’t think you can rely on any content being there on document.ready
. A lot of stuff gets pulled in dynamically. At this point, I also run into race conditions with line numbers in chrome. Sometimes the <code>
element is there by the time you add the data-linings="end"
attribute, sometime it’s not, in which case adding the line numbers goes wrong.
I think you’d be better off using something like JSs MutationObserver
, listening to changes in <code>
elements, and then adding the attribute when new elements appear.
Code line numbers are still now working for me. Windows and MacOS on latest Chrome:
What I observe on Safari is that I see the line numbers if I load the page directly (e.g. refresh once I’m on the discussion), but not if I navigate to the discussion (e.g. clicking on the title from the list of topics).
My guess for why this is is that discuss is primarily a JS app, so switching pages is handled by JS events changing the content of the DOM rather than the browser reconstructing a new page, but does implement server-side rendering for speed, so you do get the content of the first page loaded after document.ready.
I just spent 10 minutes refreshing the page trying to debug this image. This is turning out to be a great morning lol.