¿Cómo cambiar los colores predeterminados del bloque de código proporcionado?

[Don]

Puedes apuntar por separado los idiomas del código y anular la detección automática de idiomas como se mencionó en las publicaciones anteriores.

Si quieres apuntar a Swift, puedes hacerlo con la clase .language-swift. Para ser más específico… code.hljs.language-swift. Y puedes cambiar los colores de Swift en CSS.

@PrettyGirl

Quiero que tenga el color como el siguiente,

He revisado esto y parece que se acerca al tema de Xcode. Pero cambiaremos esos dos colores para que se adapten mejor a los colores del código de tu captura de pantalla.

El problema con estos colores es que son difíciles de leer en modo oscuro. Por eso, en la página de demostración de highlight.js hay un fondo blanco y creo que esta es la razón por la que Discourse utiliza una combinación de colores genérica por defecto para los idiomas. Si recuerdo correctamente, hubo algún informe en el pasado sobre la dificultad de lectura en modo oscuro, etc…

---

Para cambiarlo solo a Swift, tienes que crear un nuevo componente de tema o añadir esto a uno existente. Nota: Estos colores también se usarán en modo oscuro (fondo blanco, etc.), así que si quieres colores diferentes en modo oscuro, tendrás que crear nuevas definiciones de color dark-light-choose().

Común / 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;
  }
}

Antes

Después