Enhance the readability and consistency of the the Markdown code styles.
Review Request #8135 — Created April 28, 2016 and submitted
This makes a few changes to the new inline code and code block styles for the Markdown WYSIWYG stylesheets to make the text easier to read and to help keep the edit and render content lined up, as we had it before. The spacing around the inline code blocks have been reduced, and the red and border colors changed to increase contrast. This helps keep the text readable while also preventing the inline blocks from bumping up against neighboring rows. There's also some padding that helps keep the rendered inline code box the same width of the source text (backticks included), so that those editing content will have a better sense of line width, preventing them from going over column limits. The code blocks have had their padding and alignment updated to keep the rendered code aligned with the editted version. The top and bottom borders are placed where the opening and closing fenced code block markers (the triple backticks) would be. With these changes, the users will now have a much nicer experience editing the Markdown, getting the benefits of the new code styling with better readability and improved consistency between source text and rendered results.
Tested on Chrome and Firefox. Flipped back and forth between edit and
render modes.Tested the review request fields, review dialog, and comment replies.
The latter two don't have left/right borders, but it's not bad looking
without them, and can be addressed on the Review Board side.
- Change Summary:
-
Code blocks have the border radius and side borders by default again. Review Board will be updating the styles for the review request fields.
- Description:
-
This makes a few changes to the new inline code and code block styles
for the Markdown WYSIWYG stylesheets to make the text easier to read and to help keep the edit and render content lined up, as we had it before. The spacing around the inline code blocks have been reduced, and the red
and border colors changed to increase contrast. This helps keep the text readable while also preventing the inline blocks from bumping up against neighboring rows. There's also some padding that helps keep the rendered inline code box the same width of the source text (backticks included), so that those editing content will have a better sense of line width, preventing them from going over column limits. The code blocks have had their padding and alignment updated to keep the
~ rendered code aligned with the editted version. The box now extends to ~ the edge of the textarea, removing the boxy look and giving us room to ~ align content. The top and bottom borders are placed where the opening ~ rendered code aligned with the editted version. The top and bottom ~ borders are placed where the opening and closing fenced code block ~ markers (the triple backticks) would be. - and closing fenced code block markers (the triple backticks) would be. With these changes, the users will now have a much nicer experience
editing the Markdown, getting the benefits of the new code styling with better readability and improved consistency between source text and rendered results. - Commit:
-
d91eb8c41bffd55dd7583a727060afed2467f5e6bedd42a68de4727a5658aa6089562cf987914227
- Added Files: