Implement bad/good styling for code boxes


3 years ago
3 years ago


(Reporter: fscholz, Assigned: shobson)



(Whiteboard: [specification][type:feature])


(2 attachments)

What problems would this solve?
Oftentimes we present best practices along with bad examples. I propose to style the code boxes as appropriate, so that the reader clearly knows what to use and what not.

Who would use this?

What would users see?
More clearly what is good code and what is bad code.

What would users do? What would happen as a result?
A reader should be able to parse the info on the page faster as it is more obvious what the code blocks show. The reader should be more motivated to compare the bad and the good sample against each other.

Is there anything else we should know?


3 years ago
Assignee: nobody → shobson
oh, and I guess it would be nice, if the text that is displayed on the right is dynamic someone. 
So not only "bad" / "good". But maybe we want to use "old ES5 code" / "new ES6 code", for instance.

Anyway, the colors would be a really good start already :)


3 years ago
Severity: normal → enhancement
Component: General → Design

Comment 2

3 years ago
Created attachment 8560756 [details]
Good and bad examples with colours and iconography.

What do you think of the icons being positioned over top of the first line number?
Comment on attachment 8560756 [details]
Good and bad examples with colours and iconography.

Looks good to me.

Edge case: what happens if highlight[1] is set on the <pre> ?

Comment 4

3 years ago
Created attachment 8562262 [details]
Screen shot with line 1 highlighted.

Seems to stand up okay to having the line highlighted. The highlighting is not as pronounced but nothing looks broken.
It is absolutely ok, it is an edge case: we rarely want to highlight the first line anyway :-) Thx.

Comment 6

3 years ago
A first pass at this is on it's way into production. There's a page here with examples:

Right now it only works on code blocks that have been processed with prism (so only works with javascript turned on) and must have headings added to the text manually by the writer. I can explore alternatives to either of these if we think it is important.

Comment 7

3 years ago
I'm going to close this since I have had only positive feedback so far :)
Last Resolved: 3 years ago
Resolution: --- → FIXED
Yes! It is really nice. Well done.

Comment 9

3 years ago
Commit pushed to master at
Bug 1125803: Good/bad code example styling

Can't rely on position:relative coming from other classes. Also can't rely on line number to be there so moved the icons to a position that doesn't rely on the line numbers being present.
You need to log in before you can comment on or make changes to this bug.