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? =================== Readers 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? ====================================== Inspiration: https://www.dartlang.org/articles/style-guide/
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
See Also: → bug 948248
Severity: normal → enhancement
Component: General → Design
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 is set on the <pre> ?
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.
I'm going to close this since I have had only positive feedback so far :)
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → FIXED
Yes! It is really nice. Well done.
Commit pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/041756cb658184f5be877d252a4be272a40295ac 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.