Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Chris Freeman
MOD
Chris Freeman
Treehouse Moderator 68,468 Points

@Treehouse: Better code block formatting (desperately) needed in Community posts

There are many Community threads on how to format code in posts (e.g., How to type code in the forum](https://teamtreehouse.com/community/how-to-type-code-in-the-forum) and emoji support and syntaxhighlighting.

What they don't address is how aweful the code block format is for certain languages. It seems the color choices were intended for a wiki-like white background. With the default black background, the braces, brackets, and parens in Python become almost indiscernible.

Take the Python dict definition below. How long does it take you to differentiate the difference between the tuple and the set contained in the list?

This is

my_dict = {'a': [{'a': 1, 'b': 3}, ('a': 10, 'b': 20), {'a': 1, 'b': 3}]}
for item in my_dict:
    print(type(item))
[regexp1 = "(?P<g1>{0}){{{1},}}(?P<g2>[{2}])+".format('[a-z]', 3, "c-z")
>>> regexp1
'(?P<g1>[a-z]){3,}(?P<g2>[c-z])+'

>>> my_dict = {'a': [{'a': 1, 'b': 3}, {10, 20}, (100, 200)]}
>>> for item in my_dict['a']:
...     print(type(item))
... 
<class 'dict'>
<class 'set'>
<class 'tuple'>

The inline contrast is much better: my_dict = {'a': [{'a': 1, 'b': 3}, {10, 20}, (100, 200)]}

With colors and contrasts:

  • background: #384047,
  • paren: #4b5658, contrast: 1.1:1
  • equal sign: #7b8b8e, contrast: 1.39:1
  • colon: #4b5658, contrast: 1.1:1

These are way below the minimum contrast of 3:1 as outlined in the W3C Recommendations.

What can be done to improve the color choices?

Tag: Kenneth Love

3 Answers

Kenneth Love
STAFF
Kenneth Love
Treehouse Guest Teacher

Wow, did you really post this 17 days ago? I just got an email about it today. Weird (and sorry about that).

There's not anything I can do about the syntax highlighting, but I've passed your thread over to our designers and hopefully they'll be able to tweak the stylesheet a little. I agree, it is really hard to read.

Chris Freeman
Chris Freeman
Treehouse Moderator 68,468 Points

Truthfully the tag format was off. I corrected it which must have triggered a new notification. :thumbsup:

Hey Chris Freeman

We have a fix for this in the works. Thanks for bringing it to our attention!

:zap:

Hey Chris Freeman,

We just released a few to this issue a few minutes ago. Let us know if this helps to clear everything up for you, and if there's anything we might have missed.

Chris Freeman
Chris Freeman
Treehouse Moderator 68,468 Points

Interestingly, I just notice this today. Probably because the contrast increased only 26.36%. It helps, and is would probably be sufficient if it was viewed in an all dark console or window. But with the bright forum border, the contrast is still too low. Compare to the code challenges where the parens, brackets, and braces, are #fff white.

Please add more contrast. If you absolutely can't increase the contrast on the punctuation, please consider shading the background to be darker. I often change CSS using Firebug the browser:

.highlight .p {
    color: #e0e0e0;
}
.markdown-zone .highlight {
    background: #181818 none repeat scroll 0 0;
}

As an aside, even though I was tagged in the post, I didn't get an email notice. Weird.