# Custom Code **URL:** https://meta.discourse.org/t/custom-code/108059 **Category:** Theme component **Tags:** official, custom-code **Created:** [January 31, 2019, 8:51pm UTC](https://meta.discourse.org/t/custom-code/108059 "2019-01-31T20:51:47Z") **Posts on this page:** 1 **Page:** 1
### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse) #### Post date: [January 31, 2019, 8:51pm UTC](https://meta.discourse.org/t/custom-code/108059/1 "2019-01-31T20:51:47Z")
| | | | | --- | --- | --- | | :discourse2: | **Summary** | **Custom Code** allows you to customize the font and colors for source shared on the site. | | πŸ‘“ | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-code) | | πŸ›  | **Repository Link** | [https://github.com/discourse/discourse-custom-code](https://github.com/discourse/discourse-custom-code) | | πŸ“– | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) | Install this theme component > [@](#): > > :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. πŸ‘ > > [❓  **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=custom-code "Ask for support on configuring and using Custom Code") [πŸ›  **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=custom-code "A bug report means something is broken, preventing normal/typical use of the theme component") [πŸ‘€  **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=custom-code "Discussion about the user interface of Custom Code, and how features are presented (including language and UI elements)") [πŸ’‘  **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=custom-code "Discussion about how existing Custom Code features can be improved or enhanced, and how proposed new features could work") ### Features Generally, the fonts used to write code are part of the [`monospace` family](https://fonts.google.com/?category=Monospace). The most known fonts are: - [Inconsolata](https://fonts.google.com/specimen/Inconsolata) - [Fira Mono](https://fonts.google.com/specimen/Fira+Mono) - [Source Code Pro](https://fonts.google.com/specimen/Source+Code+Pro) - [Anonymous Pro](https://fonts.google.com/specimen/Anonymous+Pro) - [Ubuntu Mono](https://fonts.google.com/specimen/Ubuntu+Mono) _(That said, this does not prevent anyone from experimenting with the most disparate fonts!)_ To change font go to [https://fonts.google.com](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. * * * ![image](https://global.discourse-cdn.com/meta/original/3X/9/9/99cbb6a0ddbf98b66a1f2d10ea80892e6903ac7b.png) ![image](https://global.discourse-cdn.com/meta/original/3X/9/8/9855612cd5bb2889653fbdbec096832e8e38ad35.png) ### Settings | Name | Description | | --- | --- | | font | Select a new font from [Google Font](https://fonts.google.com/). 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 document** > > > > Perform check on document: