How to change default colours of the code block provides?

Support
1

For instance, this is swift code

func jjj () {

let jj: String = "1"
}

image

I want it to be coloured like the following,

image

2

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.

2 Likes
3

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.

image

But I want something like the following

image

Is it possible to edit a file etc via terminal? so I can change the default colours assigned for a specific language?

4

Detected languages are done through a site setting: highlighted languages.

image
image773Ă—263 8.7 KB

Swift belongs to the list by default but does not on meta.

The supported languages by this third-party library are listed here:

https://highlightjs.readthedocs.io/en/latest/supported-languages.html

edit: as explained here :face_with_peeking_eye:

@PrettyGirl, markdown tip: you can escape backticks from a codeblock by wrapping your code by four backticks instead of three :slight_smile:

``` swift

[code here]
```
2 Likes
5

Hello :wave:

You can also try to change colors with this theme component :slightly_smiling_face:

4 Likes
6

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?

7

Oh, sorry about that, I misread your topic. :person_facepalming:

Yes :slight_smile:

1 Like
8

Did you try the theme component posted beeper your last message?

1 Like
9

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.

10

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.

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.

Screenshot 2023-10-05 at 6.27.36

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

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
Screenshot 2023-10-05 at 6.48.10

After
Screenshot 2023-10-05 at 7.10.05

5 Likes
11

A theme-component is added to the 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

5 Likes
12

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.

3 Likes
13

Amazing, thanks a lot. It works :slight_smile:

1 Like
14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.