Code blocks with new Discourse barely readable

Site discussion
,
1

I noticed that with one of the recent updates to Discourse the code blocks now have a darker gray background, which makes the text hardly readable. E.g.:

$noop(Nice names for some special countries)
$if($eq(%releasecountry%,XE),$set(releasecountry,Europe),)
$if($eq(%releasecountry%,XG),$set(releasecountry,DDR),)
$if($eq(%releasecountry%,XU),$set(releasecountry,[Unknown] ),)
$if($eq(%releasecountry%,XW),$set(releasecountry,[Worldwide]),)

@Freso , @Zas : Is it possible to update the stylesheet? I don’t know how this was configured previously, but something like

pre code {
    background: #f0f0f0;
}

seems to work better.

1 Like
2

Could you post a screenshot, I guess you are in the Light Theme as my code blocks are good here with Dark Theme (MB style):

wp_ss_20190208_0001
wp_ss_20190208_0001720Ă—1280 156 KB

3

This is what I see:

grafik
grafik701Ă—137 16.8 KB

Black text on a darkish gray. The comment in the first line is completely unreadable.

3 Likes
4

Oh actually, it’s OK on mobile but on Dark Theme (MB) on PC it’s also this strange light grey:

image
image432Ă—836 55.6 KB

1 Like
5

Using the Discourse default dark theme, the first line in your initial example is readable, but it’s still not great with white (or light grey!) text on grey background. However, is this an issue specifically with taggerscript or does it also apply to other code highlighting?

If it’s only for taggerscript then maybe there are some changes from other code highlights that need to be merged into the taggerscript highlighter. AFAIK both our light and regular dark themes are “vanilla Discourse”, so I’d expect to see similar complaints on meta.discourse.org but I didn’t find any in a quick glance.

I don’t know if this is helpful or not, but I don’t want to implement a number of hackarounds if there’s an underlying issue that ought to be fixed upstream. :slight_smile:

1 Like
6

No, this is not specific to tagger script. The way this works the language implementations don’t know anything about formatting, they just mark code regarding to it’s function. E.g. in the above example the first line is totally unreadable because it is marked as a comment, and comments have the CSS class hljs-comment which gets the color #998, which is unfortunately close enough to the background color of the code block (#919999).

You get the same issue with other styles of comments:

<!-- A HTML comment -->
<p>There is a HTML comment in front of this line</p>

// A C style comment
printf("There is a C style comment in front of this line")
1 Like
7

This looks really ugly:

Code%20Block%20Colors
Code%20Block%20Colors892Ă—222 9.7 KB

2 Likes
8

On meta.discourse.org the coloring is different, there the code block gets a background color of #f8f8f8 in the light theme.

This is what my above example looks here:

grafik
grafik705Ă—139 7.39 KB

The same on meta.discourse.org:

grafik
grafik717Ă—143 8.09 KB

See how the text colors are the same, but the background color is different.

2 Likes
9

Indeed, the light theme on mobile also looks good. @Freso are you sure there are no custom CSS for this? I know we had some CSS customization done to the forums here.

1 Like
10

We had a “Picard-style Tagger Script highlighting” theme component that I’ve removed now. The code blocks seem a bit better for me in default dark theme. Do they look better/ok for you now on light theme?

This is the code that is/was in said theme component (I’m not sure where I got it from, but I think maybe you (@outsidecontext) were the one who made it?):

// Based on https://github.com/phw/picard-website/blob/syntax-highlighting/website/frontend/static/less/highlightjs/picard.less

/*
  Minimal syntax highlighting mimicking the look of tagger script inside MusicBrainz Picard.
*/

.lang-taggerscript .hljs {
  word-break: break-word;
}


/* Base color: saturation 0; */

.lang-taggerscript .hljs,
.lang-taggerscript .hljs-subst {
  color: #444;
}

.lang-taggerscript .hljs-comment {
  font-weight: bold;
  font-style: italic;
  color: #808080;
}

.lang-taggerscript .hljs-keyword {
  font-weight: bold;
  color: #7C20AD;
}

.lang-taggerscript .hljs-variable {
  color: #162d80;
}

.lang-taggerscript .hljs-symbol {
  color: #800000
}

pre code {
	background: #919999;
}

(This was also only applied to “Desktop” mode, which might be why it looked better on mobile… :slight_smile: )

2 Likes
11

Ah, yes. That code was meant to mimic the coloring used inside Picard, but actually I think it was changed at some point and no longer matched the Picard colors (on the Picard website it still does).

I think the bad thing here actually was:

pre code {
	background: #919999;
}

Not sure when and how this sneaked in, but it definitely was wrong. Do we still want to allow the Picard look for tagger script? Or are we ok with the default here? It is a bit less colorful, but otherwise fine.

3 Likes
12

I think we should keep the default code block colours.
At least we are very less prone to such issues in the future.

1 Like
13

I honestly don’t care much either way. I’m happy with default Discourse colouring (as @jesus2099 says, that seems like the path less prone to randomly stop working), but if the community here would prefer that it looks more similar to how it looks in Picard, I’m also happy to update the CSS code/theme component. :slight_smile:

If anyone is invested in this but don’t want to comment, go ahead and give your thoughts here:

  • Use default Discourse code colouring
  • Use Picard-style code colouring
  • Either works for me!

0 voters

2 Likes
14

Personally, I don’t really care as long as I can read it.

1 Like