Custom source code formatting component

A theme component that allows you to customize the font and colors for source source shared on the site.

Repository link
https://github.com/discourse/discourse-custom-code

Some details

Generally, the fonts used to write code are part of the monospace family. The most known fonts are:

(That said, this does not prevent anyone from experimenting with the most disparate fonts!)

To change font go to https://fonts.google.com

  • choose the font you want to use

  • and customize it

  • Select EMBED and copy the string relative to the family font (1) inside the theme setting Font

  • Copy and paste the string relative to CSS (2) inside the theme setting font-family (do not add the character ; at the end of the string).

All the other settings should be clear enough.

The settings of this component are divided between light and dark theme. If you use both, remember to add the component to both themes.



How do I install this component?

You install this component just like any other theme. Follow the instructions in the official guide:

Once you’re done, simply add the component to your current theme.

27 Likes