# How to change default colours of the code block provides?
**URL:** https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011
**Category:** Support
**Created:** [October 4, 2023, 9:07am UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011 "2023-10-04T09:07:05Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@PrettyGirl](https://meta.discourse.org/u/PrettyGirl)
#### Post date: [October 4, 2023, 9:07am UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/1 "2023-10-04T09:07:05Z")
For instance, this is swift code
```swift
func jjj () {
let jj: String = "1"
}
```
I want it to be coloured like the following,
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [October 4, 2023, 10:12am UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/2 "2023-10-04T10:12:29Z")
The color is added depending on the language. You can check whether Swift is added in the highlighted\_languages and if detection still does not work, you can also manually set the language for a code block.
> [@Selecting the programming language used in code blocks](https://meta.discourse.org/t/select-the-programming-language-used-in-code-blocks/19247):
>
> bookmark This guide explains how to select the programming language used in code blocks within Discourse posts, along with how to suppress syntax highlighting. person_raising_hand Required user level: All users When you enclose code using triple backticks in your posts, Discourse uses [highlight.js](https://highlightjs.org/) to automatically detect and apply syntax highlighting to the code. However, you can specify the programming language if the autodetection does not work as expected. Specifying the programming…
---
### Author:  [@PrettyGirl](https://meta.discourse.org/u/PrettyGirl)
#### Post date: [October 4, 2023, 10:51am UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/3 "2023-10-04T10:51:19Z")
The code block formatting is fine it was added as (without the “”)
"``` swift
[code here]
"```
It highlights as follows, but the issue is the colour it provides, I don’t like it. It gets highlighted as below. (see the red colour “jjj”, I want to have it in blue colour.
But I want something like the following
Is it possible to edit a file etc via terminal? so I can change the default colours assigned for a specific language?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 4, 2023, 10:54am UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/4 "2023-10-04T10:54:30Z")
Detected languages are done through a site setting: `highlighted languages`.
Swift belongs to the list by default but does not on meta.
The supported languages by this third-party library are listed here:
> **[Supported Languages — highlight.js 11.9.0 documentation](https://highlightjs.readthedocs.io/en/latest/supported-languages.html)**
edit: as explained here 🫣
> [@Configure which programming languages are available for syntax highlighting](https://meta.discourse.org/t/configure-which-programming-languages-are-available-for-syntax-highlighting/239717):
>
> bookmark This guide explains how to configure which programming languages are available for syntax highlighting in Discourse. person_raising_hand Required user level: Administrator Syntax highlighting enhances readability in code blocks by applying formatting based on the programming language. You can customize the languages available for syntax highlighting in Discourse. Configuring the highlighted\_languages site setting To configure the list of programming languages for syntax highli…
@PrettyGirl, markdown tip: you can escape backticks from a codeblock by wrapping your code by four backticks instead of three 🙂
````plaintext
``` swift
[code here]
```
````
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 4, 2023, 11:04am UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/5 "2023-10-04T11:04:20Z")
Hello 👋
You can also try to change colors with this theme component 🙂
> [@Custom Code](https://meta.discourse.org/t/custom-code/108059):
>
> discourse2Summary Custom Code allows you to customize the font and colors for source shared on the site.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-code)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-custom-code](https://github.com/discourse/discourse-custom-code)open_bookNew 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 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: [Inc…](https://fonts.google.com/specimen/Inconsolata)
---
### Author:  [@PrettyGirl](https://meta.discourse.org/u/PrettyGirl)
#### Post date: [October 4, 2023, 12:59pm UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/6 "2023-10-04T12:59:08Z")
Thank you for the tip and the link. However, the site setting `highlighted languages` includes `swift`. It gets highlighted, but I don’t like the colours it currently highlighting. Is there any other way? editing the highlight.js inside the discourse folder etc? there should be a way isn’t it, I notice the highlight.js is also opensource.
Discourse ships with hightlight.js by default?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 4, 2023, 1:05pm UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/7 "2023-10-04T13:05:00Z")
Oh, sorry about that, I misread your topic. 🤦
> [@PrettyGirl](#):
>
> Discourse ships with hightlight.js by default?
Yes 🙂
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [October 4, 2023, 1:43pm UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/8 "2023-10-04T13:43:51Z")
Did you try the theme component posted beeper your last message?
---
### Author:  [@PrettyGirl](https://meta.discourse.org/u/PrettyGirl)
#### Post date: [October 5, 2023, 1:30am UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/9 "2023-10-05T01:30:47Z")
I didn’t, because, I don’t know what other areas (throughout the entire discourse app) will look different if I apply any other themes. I like the current look and settings, but just couple of issues here and there. If the theme changes other appearance or settings etc along with providing nice code blocks, that’s not worth it. I just need to fix that specific issue.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 5, 2023, 5:18am UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/10 "2023-10-05T05:18:51Z")
You can target separately the code languages and override the auto language detection like the posts above mentioned it.
If you want to target swift than you can do it with `.language-swift` class. To be more specific… `code.hljs.language-swift`. And you can change swift colors in CSS.
> [@PrettyGirl](#):
>
> I want it to be coloured like the following,
>
> 
I checked this and it seems this is close to xcode theme. But we will change those two colors to suits more with your screenshot code colors.
The problem with these colors is it is hard to read in dark mode. This is why it has in the [highlight.js demo page](https://highlightjs.org/demo) white background and I think this is the reason why Discourse use default generic colors combo to languages. If I remember correctly there was some report in the past about it hard to read on dark mode etc…
* * *
To change it to only swift you have to create a new theme component or add this to an existing one. Note: These colors will used in dark mode too (white background etc…) so if you want different colors in dark mode then you have to create new color definitions `dark-light-choose()`.
Common / CSS
```scss
code.hljs.language-swift {
background: #fff;
color: #000;
.xml .hljs-meta {
color: silver;
}
.hljs-comment,
.hljs-quote {
color: #007400;
}
.hljs-attribute,
.hljs-keyword,
.hljs-literal,
.hljs-name,
.hljs-selector-tag,
.hljs-tag {
color: #aa0d91;
}
.hljs-template-variable,
.hljs-variable {
color: #3f6e74;
}
.hljs-code,
.hljs-meta .hljs-string,
.hljs-string {
color: #c41a16;
}
.hljs-link,
.hljs-regexp {
color: #0e0eff;
}
.hljs-bullet,
.hljs-number,
.hljs-symbol,
.hljs-title {
color: #2b75a6;
}
.hljs-meta,
.hljs-section {
color: #643820;
}
.hljs-built_in,
.hljs-class .hljs-title,
.hljs-params,
.hljs-title.class_,
.hljs-type {
color: #442fa1;
}
.hljs-attr {
color: #836c28;
}
.hljs-subst {
color: #000;
}
.hljs-formula {
background-color: #eee;
font-style: italic;
}
.hljs-addition {
background-color: #baeeba;
}
.hljs-deletion {
background-color: #ffc8bd;
}
.hljs-selector-class,
.hljs-selector-id {
color: #9b703f;
}
.hljs-doctag,
.hljs-strong {
font-weight: 700;
}
.hljs-emphasis {
font-style: italic;
}
}
```
Before
After
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [October 5, 2023, 5:30am UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/11 "2023-10-05T05:30:48Z")
> [@PrettyGirl](#):
>
> I didn’t, because, I don’t know what other areas (throughout the entire discourse app) will look different if I apply any other themes.
A #Customization > Theme component is added to the #Customization > Theme you already use. So it does not change the whole look, it adds or changes something specific. So the custom code component only chages the appearence of code
> [@About the Theme component category](https://meta.discourse.org/t/about-the-theme-component-category/232731):
>
> Theme components can be used to add front end features or change elements of your forum design. Smaller and more targeted than full themes, they can be combined with other theme components to create a bespoke forum design tailored for your community. You can find more info on how to use, create, and share your own theme components in: [Installing a theme or theme component](https://meta.discourse.org/t/install-a-theme-or-theme-component/63682)[Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)[Designer's Guide to getting started with themes in Discourse](https://meta.discourse.org/t/designers-guide-to-discourse-themes/152002)[Developing Dis…](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)
> [@About the Theme category](https://meta.discourse.org/t/about-the-theme-category/60925):
>
> Themes are expansive customizations that change multiple elements of the style of your forum design, and often also include additional front-end features. Larger and more encompassing than theme components, themes have the ability to significantly change the look and layout of your forum. Depending on which elements are already included in a theme, it is also possible to combine other theme components with them to further individualize your site. You can find more info on how to use, create,…
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [October 5, 2023, 12:49pm UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/12 "2023-10-05T12:49:41Z")
> [@PrettyGirl](#):
>
> I didn’t, because, I don’t know what other areas (throughout the entire discourse app) will look different if I apply any other themes.
The description says that it changes just code blocks, which is exactly what you want to do.
Please read the links about how themes work that others suggested.
---
### Author:  [@PrettyGirl](https://meta.discourse.org/u/PrettyGirl)
#### Post date: [October 5, 2023, 1:27pm UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/13 "2023-10-05T13:27:48Z")
Amazing, thanks a lot. It works 🙂
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [November 4, 2023, 1:28pm UTC](https://meta.discourse.org/t/how-to-change-default-colours-of-the-code-block-provides/281011/14 "2023-11-04T13:28:47Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.