Wie kann man die Standardfarben von Codeblöcken ändern?

[Don]

Sie können die Code-Sprachen separat ansprechen und die automatische Spracherkennung überschreiben, wie in den obigen Beiträgen erwähnt.

Wenn Sie Swift ansprechen möchten, können Sie dies mit der Klasse .language-swift tun. Um genauer zu sein… code.hljs.language-swift. Und Sie können die Swift-Farben in CSS ändern.

@PrettyGirl

Ich möchte, dass es wie folgt eingefärbt wird,

Ich habe das überprüft und es scheint, dass dies dem Xcode-Theme nahe kommt. Aber wir werden diese beiden Farben ändern, damit sie besser zu den Code-Farben Ihres Screenshots passen.

Das Problem mit diesen Farben ist, dass sie im Dark Mode schwer zu lesen sind. Deshalb gibt es auf der Highlight.js Demo-Seite einen weißen Hintergrund, und ich denke, das ist der Grund, warum Discourse Standard-generische Farbkombinationen für Sprachen verwendet. Wenn ich mich richtig erinnere, gab es in der Vergangenheit Berichte darüber, dass sie im Dark Mode schwer zu lesen sind usw.

---

Um es nur auf Swift umzustellen, müssen Sie eine neue Theme-Komponente erstellen oder diese zu einer bestehenden hinzufügen. Hinweis: Diese Farben werden auch im Dark Mode verwendet (weißer Hintergrund usw.), wenn Sie also im Dark Mode andere Farben wünschen, müssen Sie neue Farbdefinitionen dark-light-choose() erstellen.

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

Vor

Nach