Come cambiare i colori predefiniti del blocco di codice fornito?

[Don]

Puoi puntare separatamente le lingue del codice e sovrascrivere il rilevamento automatico della lingua come menzionato nei post precedenti.

Se vuoi puntare a Swift, puoi farlo con la classe .language-swift. Per essere più specifici… code.hljs.language-swift. E puoi cambiare i colori di Swift in CSS.

@PrettyGirl

Voglio che sia colorato come segue,

Ho controllato questo e sembra che sia vicino al tema Xcode. Ma cambieremo quei due colori per adattarli meglio ai colori del codice del tuo screenshot.

Il problema con questi colori è che sono difficili da leggere in modalità scura. Ecco perché nella pagina demo di highlight.js c’è uno sfondo bianco e penso che questo sia il motivo per cui Discourse utilizza una combinazione di colori generica predefinita per le lingue. Se ricordo bene, in passato ci sono state segnalazioni sul fatto che fosse difficile da leggere in modalità scura, ecc…

---

Per cambiarlo solo in Swift, devi creare un nuovo componente tematico o aggiungerlo a uno esistente. Nota: questi colori verranno utilizzati anche in modalità scura (sfondo bianco, ecc.), quindi se desideri colori diversi in modalità scura, dovrai creare nuove definizioni di colore dark-light-choose().

Comune / 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;
  }
}

Prima

Dopo