Here’s a really quick and easy CSS change that may benefit forums where people post code in a few different languages.
At least with the languages we use, Discourse does a great job of guessing which language code is in, but it’s not always obvious to the reader until they mentally parse some of the code. I figure it’s good to help them, especially if they’re looking for example code in a particular language.
On our forum, it’s mostly javascript* and vbscript, so I set them up to look like this:
(*Technically jscript, but that’s not important right now.)
Each language has a different background color, and also a watermark on the top-right. (It’s offset from the right edge a bit because there’s usually a scrollbar with our code blocks, and the scrollbar eats into the image. You can adjust that in the CSS if you wish.)
I also made changes to the code blocks for unspecified/unknown languages as I wanted them to stand out more from normal text, and I also wanted to increase the left and right margins slightly for the inline blocks:
How suitable this is will depend a lot on your community and the types of things posted there.
Here are the watermark images. You’ll need to add these to the Assets for the site design post in your Staff area so they’re hosted on your site, then grab the URLs to them and use those in the CSS.
- 
If you want to make similar ones, they’re rotated 14 degrees and black text at 20% opacity.
Here’s the CSS to add under Customize > CSS/HTML.
Desktop:
p>code, li>code, pre>code {
color: #5810c7;
background: #d0f6ff;
padding-left: 0.5em;
padding-right: 0.5em;
}
pre code {
color: #5810c7;
background: #d0f6ff;
}
.hljs.javascript, .hljs.lang-javascript {
background: #daffcc;
background-image: url(/uploads/default/original/3X/e/2/e25edb5b76ad6663d5bd2e4c3177e7cc6abaeaa5.png);
background-repeat: no-repeat;
background-position: top right 1.20em;
background-origin: content-box;
}
.hljs.vbscript, .hljs.lang-vbscript {
background: #ffeecc;
background-image: url(/uploads/default/original/3X/7/3/738f1f9af4cdd6c1d6f4c9f672861365cefb64c7.png);
background-repeat: no-repeat;
background-position: top right 1.20em;
background-origin: content-box;
}
Mobile:
p>code, li>code, pre>code {
color: #5810c7;
background: #d0f6ff;
padding-left: 0.5em;
padding-right: 0.5em;
}
pre code {
color: #5810c7;
background: #d0f6ff;
}
.hljs.javascript, .hljs.lang-javascript {
background: #daffcc
}
.hljs.vbscript, .hljs.lang-vbscript {
background: #ffeecc
}
The mobile version doesn’t use the watermark images, as I doubt they’d be great on a narrow screen.
(In the Discourse Customize page where you enter your CSS, click the phone icon near the top right to toggle between desktop and mobile. Click enable once it’s set up, and then save. Or preview first. Via some complete and utter magic, Discourse will even update existing browser tabs/windows the moment you hit save!)
If you want to experiment with colors and other CSS settings, I recommend pushing F12 in Chrome and using the arrow, top-left of the debugging panel, to select a code block, then playing with things in the CSS view on the right of the panel. You can use a color picker there to quickly try different colors.
You can also use that to find the css classes for other languages. Note that there seem to be two classes per language: One used if Discourse had to guess which language some code was; the other used if the language was explicitly specified in the post, like this:
```javascript
function cat() { return "meow"; }
```
Hope someone likes it. Have fun!