Как изменить цвета по умолчанию для блоков кода?

[Don]

Вы можете отдельно настроить языки кода и переопределить автоматическое определение языка, как упоминалось в предыдущих сообщениях.

Если вы хотите настроить Swift, используйте класс .language-swift. Более конкретно: code.hljs.language-swift. Также вы можете изменить цвета Swift в CSS.

@PrettyGirl

Я хочу, чтобы оно было раскрашено следующим образом:

Я проверил это, и похоже, что это близко к теме Xcode. Однако мы изменим эти два цвета, чтобы они лучше соответствовали цветам кода на вашем скриншоте.

Проблема с этими цветами в том, что их трудно читать в тёмной теме. Именно поэтому на странице демонстрации highlight.js используется белый фон, и, думаю, именно по этой причине Discourse использует стандартную комбинацию цветов для языков. Если я правильно помню, в прошлом были сообщения о том, что это трудно читать в тёмной теме и т.д…

---

Чтобы изменить стили только для Swift, вам нужно создать новый компонент темы или добавить этот код в существующий. Примечание: эти цвета будут использоваться также в тёмной теме (белый фон и т.д.), поэтому, если вы хотите разные цвета в тёмной теме, вам нужно создать новые определения цветов с помощью dark-light-choose().

Общие / 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;
  }
}

До

После