I'm not a fan of the new styling for remarkup code blocks, specifically for the name attribute. When I first saw this I thought that I had forgotten how to remarkup.
<?php deep();
joshuaspence | |
Mar 3 2015, 7:48 PM |
F387682: pasted_file | |
Apr 28 2015, 5:29 PM |
F328566: Screenshot_2015-03-04-07-02-53.png | |
Mar 3 2015, 8:04 PM |
I'm not a fan of the new styling for remarkup code blocks, specifically for the name attribute. When I first saw this I thought that I had forgotten how to remarkup.
<?php deep();
rPHU libphutil | |||
D12594 | rPHU00e1f2da2829 Add additional CSS class when code-block is counterexample | ||
rP Phabricator | |||
D12596 | rP4da2e7efd8e1 More minor Remarkup tweaks |
Do you have specific feedback? The old design was not consistent with other Remarkup blocks, so it was converted to a standard UI header. I went through a few dozen live examples before settling on this direction.
Im not sure if its consistent, but I liked the boxing that previously joined the header to the code block. It made it obvious that the two were related.
At the moment, my original example looks too similar to:
test.php
<?php derp();
The problem with the old design is it has a number of display issues, bad font mixing, and the different colors were problematic. One way to keep the header connected would likely involve removing the color choices.
I had similar feedback on the original diff I think -- I think this one looks a lot better, but we did lose the sense that the title is visually tied to the code block and is a label for the block content.
Giving it a yellow background is the obvious fix, and maybe it wouldn't be awful now with the other font/size/weight fixes? Or if it was very pale?
Or maybe just putting a bottom border on it? Not sure if that'd be gross/weird:
Title ------- ----------------------- | code code code | -----------------------
Just something to tie it visually to the block in a stronger way, so it's clear that it's a block name and not just a small section header.
the color choices
The only choices are red (COUNTEREXAMPLE) and yellow right now, right?
Yeah, the main thing I looked at with the header was where the actual use was occurring. In real examples, most were in documentation or more long-form comments/descriptions. In those cases a simpler header worked very well. If you're using these more frequently in code-review or other short form comments, the display does not hold up as well.