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.