chroma
chroma copied to clipboard
alecthomas
Make each code line its own table row/column in HTML table output
Would there be interest to modify the current HTML table output so that each line is in its own table row/column instead of there being one single large row and a single column for all code? This is how code view is on Github as an example.
This makes it possible to select/highlight an individual line -- see clicking on a line number in Github to select that line as an example.
Having each line of code in its own <li> would probably work OK too if that were less of a disruptive change
I'm not unopposed to this idea. TBH I'm not even sure why I took the original approach I did. It might be that I just emulated whatever Pygments was doing.
TBH it's also not clear to me what advantage it gives... when you say "clicking" are you talking about some kind of JS integration outside of Chroma?
Yes I am taking about a javascript integration. Sorry it wasn't clear earlier I was giving an example of a common case for this:
If you click on a line number in a file in Github it changes the background color of just that line to indicate it is selected.
That wouldn't be easy with the current table chroma outputs because all lines of code are in one single column.
I have another reason switching to a table could be helpful. I was testing my site using a screen reader and noticed that the behavior of reading a code snippet was odd. When the VoiceOver hit a code block it read each line number first, then read each line. That makes sense when looking at the HTML but was very confusing to me (admittedly, I am not a screen reader user). I then compared to GitHub and found it to read the line number, then the line of text. That seems to be the type of behavior one would want when reading code with a screen reader.
edit: I did a quick hack on Chroma to get it to output each line in a <tr> and the screen reader now reads the way I expect. One thing to consider is that it changes how you select the code. With no changes to CSS the selection now includes line numbers. I did a bit more research and it looks like you can use the user-select: none CSS property to get close to how it behaves right now. Though it seems like if you do that, then you can't copy the line numbers at all, which makes sense, but is a change to be aware of.
TBH I'm not even sure why I took the original approach I did. It might be that I just emulated whatever Pygments was doing.
I think I implemented this in Chroma some moons ago, and I copied the markup from Pygments. There is one argument for keeping it as is, though: I suspect having 1 row per line would make it harder to copy the code (either manually or via JavaScript, as in the Copy button you often see on code snippets, Copy button logic that may break as they expect to just take the td element and copy its innerText).
currently LineNumbersInTable also hilariously falls apart if lines don't fit screen:
but at the same time is currently only option for having line numbers and be copy-paste friendly
Disabling it and adding user-select: none to line number CSS seems to work fine tho
