1140967 - Detect <code> blocks and add syntax highlighting, line numbers, etc

Status: NEW

(Toolkit :: Reader Mode, enhancement, P5)

Description

[Blair McBride [:Unfocused] (UNAVAILABLE)]

I think we could do a lot with making a consistent and readable experience with <code> blocks in articles. This would tie in nicely with the built-in devtools. 

Things like:
* syntax highlighting
* line numbers
* etc

Potentially we could go a step further by adding richer interactive features:
* open in something like CodePen
* fork on Github
* copy entire block

But it's less clear those fit in with the core intent of readability. Maybe something to look to for devtools to optionally provide, and make sure the APIs are there for it?

Comment 2

[tobias.bengfort]

I think this is actually important because the current styling makes code-related articles near-unreadable in reader mode.

Maybe it would be enough to do something similar to what is done with hiding things: Preserve common classes and add default styling for them. For example, any class starting with ``hljs-`` could be preserved.

Comment 4

[Mike]

regression from this one?
https://bugzilla.mozilla.org/show_bug.cgi?id=1218232

Comment 5

[:Gijs (he/him)]

(In reply to Mike from comment #4)

regression from this one?
https://bugzilla.mozilla.org/show_bug.cgi?id=1218232

No, this bug is older than 1218232 so it logically can't be. And anyway this ticket is a feature request.