How to change default colours of the code block provides?

Support
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