Custom Code

Theme component
,
1
:discourse2: Summary Custom Code allows you to customize the font and colors for source shared on the site.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-custom-code
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

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

    image
    image1553×561 46.5 KB

  • and customize it

    image
    image351×725 21 KB

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

    image
    image747×692 32.3 KB

  • 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.

image
image861×290 7.36 KB

image
image860×648 20.3 KB

Settings

Name Description
font Select a new font from Google Font. Depending on the chosen one, you can further customize it, for example Sarabun:300,400,500 . If not set the default font will be applied.
font size Specifies the size of the font to use. If not set the default font will be applied.
font family Specifies the font to use. If not set the default font will be applied.
border radius Select the border radious for your code. Default value is 0px.
hljs light Light theme. Choose the color for text.
code light Light theme. Choose the color for code.
code background light Light theme. Choose the background color for code.
comment light Light theme. Choose the color for comment and doctag.
title light Light theme. Choose the color for title, name and meta
string light Light theme. Choose the color for string.
number light Light theme. Choose the color for number.
keyword light Light theme. Choose the color for keyword, subst, request, and status.
class title light Light theme. Choose the color for the title inside the class element.
tag light Light theme. Choose the color for tag.
attribute light Light theme. Choose the color for attribute.
symbol light Light theme. Choose the color for symbol.
hljs dark Dark theme. Choose the color for text.
code dark Dark theme. Choose the color for code.
code background dark Dark theme. Choose the background color for code.
comment dark Dark theme. Choose the color for comment.
title dark Dark theme. Choose the color for title, name and meta.
string dark Dark theme. Choose the color for string.
number dark Dark theme. Choose the color for number.
keyword dark Dark theme. Choose the color for keyword, subst, request and status
class title dark Dark theme. Choose the color for the title inside the class element.
tag dark Dark theme. Choose the color for tag.
attribute dark Dark theme. Choose the color for attribute.
symbol dark Dark theme. Choose the color for symbol.

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T16:16:48Z

Check documentPerform check on document:
36 Likes