コードブロックのデフォルトの色を変更する方法

[Don]

コード言語を個別に指定し、上記の投稿で言及されているように自動言語検出をオーバーライドできます。

Swiftを対象にしたい場合は、.language-swift クラスを使用できます。より具体的には… code.hljs.language-swift。CSSでSwiftの色を変更できます。

@PrettyGirl

次のように色付けしたいです。

これを調べたところ、Xcodeテーマに近いようです。しかし、スクリーンショットのコードの色に合わせて、これら2色を変更します。

これらの色の問題は、ダークモードで読み取りにくいことです。そのため、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;
  }
}

前

後