Change Request : Code Formatting CSS

Not sure if it’s only me (I am colour blind on reds and greens) but I really struggle to read the words which the code formatting plugin is putting into red. Any chance of making one minor tweek to change it to a lighter shade, or a different colour?

public class Car {   // nasty red badness

}

At the moment its set to #900 - a #f00 is soooo much easier to read…


Example of difference;

1 Like

If you could copy and paste that CSS into a codeblock I could drop it straight into the site.

I can take a look late after my lad has gone to bed @sampattuzzi, presumabky the custom css gets loaded last and thus overrides anythibg with the same id / class that was loaded earlier.

On a related note, if you search for “bbcode code formatting wordpress” they handle C# beautifully :slight_smile:

Would be good if we can find something good that plugs in to discourse.

I believe its the same thing, its just the CSS is different. I will see if I can find a link to the page I was looking at earlier so you can see it… it’s just soooo much easier to read :slight_smile:


Updated Mon Jan 16 2017 22:09

Here you go @sampattuzzi, it was actually when I was searching for some markdown info, not bbcode… my bad…

What’s quite nice is the configurability in use, e.g. specify whether the line numbers are used and so on… would be a real benefit… above all though, its the syntax highlighting which is the biggest issue at the moment, is there a specific css file for it?

Regarding the code block you asked for, it would be effectively this, although judging by those class names it looks like it’s used for a variety of languages, and this looks only to be the class names, not much of the other syntax;

.hljs-title, .hljs-name, .coffeescript .hljs-params, .scss .hljs-meta {
    color: f00;
    font-weight: bold;
}

If there is a specific file for the syntax highlighting I would be happy to take a look if you can provide it, if it helps, alternatively I could ask on the Discourse site for a bit of info too?

Do you think the best patch right now is to apply that CSS? Or would it be better to somehow import a complete CSS theme for code?

Up to you really…

Yes, @sampattuzzi you make the call and I’ll help as required. I would like to make the code easier as @Rob suggests. Thanks again for the suggestion @Rob, we’ll get there with this one and I really appreciate your continued attention to detail.

Looks like they are using highlight.js under the hood. So I copied the Zenburn theme from there. Take a look at the code now. Should be much better looking.

However, it’s not the only theme we can go with. Take a look at https://highlightjs.org/ and let me know if there are any you prefer.

E.g. I also really like monokai-sublime.

The code formatting is definitely much easier on the eye now than it was previously.

I guess everyone will have a personally choice, if it were me, I would probably go with something as close to the default style of the tools being used on the courses, visual studio / mono etc, but the main thing is that it’s so much easier to read.

Thanks. I’ll close the item.

I guess the problem is we have a dark theme here and our default tools are all light.

1 Like

I guess so, could always change the background of the code block though :slight_smile: Doesn’t matter, it’s vastly improved from what it was which is really the main thing. Thanks Sam.

Awesome. We are hoping to get some designer input soon so maybe we will rethink then.

1 Like