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




4 years ago
13 hours ago


(Reporter: Unfocused, Unassigned)


Firefox Tracking Flags

(Not tracked)


(Whiteboard: [about-reader-ui])

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?
Priority: -- → P5
Duplicate of this bug: 1194318
Whiteboard: [about-reader-ui]

Comment 2

13 hours ago
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.
You need to log in before you can comment on or make changes to this bug.