Enable copy and paste of highlighted code in developer tutorial

[robbiej]

I'm looking at the tutorial pages covering the development of a component within Joomla. In the sections of code there are lines highlighted with a yellow background which indicate the lines of code which are new / changed from the previous step in the tutorial. An example is the large code block near the start of this page.
The problem is that when you try to copy these highlighted lines and paste them into your own code in your own editor, you just get all of those lines pasted into a single long line, instead of having them as separate lines as shown on the web page.

I'd really like to amend the documentation so that you could both highlight the new lines, and be able to copy and paste them into your own editor, but I can't see how.

What I've discovered so far:
According to this wiki extensions page the wiki uses a syntax highlighting extension which can display sections of code.
In the specific developer tutorial pages this is invoked through eg

<source lang="php" highlight="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21">
...
</source>

However, this results in html where the line feeds are not actually present for those lines. Instead the CSS (in particular a class called 'xtra') converts those <span> elements using a display:block directive to get them to appear on separate lines.

I've tried various things such as adding line feeds via html ampersands, changing the highlight attribute to give a range of pages (highlight="1-21"), trying to add line numbers, etc but nothing has worked.

Any suggestions?

Thanks,
Robbie

[robbiej]

This is now resolved - it was a quirk of Firefox (bugzilla bug 492147), but other browsers (Chrome, Safari, Microsoft Edge) work ok and display line feeds in the copied text. I'll update the tutorial documentation to make readers aware.