Como alterar as cores padrão do bloco de código fornecido?

[Don]

Você pode direcionar separadamente os idiomas de código e substituir a detecção automática de idioma, como mencionado nas postagens acima.

Se você quiser direcionar o Swift, poderá fazê-lo com a classe .language-swift. Para ser mais específico… code.hljs.language-swift. E você pode alterar as cores do Swift no CSS.

@PrettyGirl

Eu quero que seja colorido como o seguinte,

Verifiquei isso e parece que está próximo do tema Xcode. Mas mudaremos essas duas cores para se adequarem mais às cores do código da sua captura de tela.

O problema com essas cores é que elas são difíceis de ler no modo escuro. É por isso que a página de demonstração do highlight.js tem um fundo branco e acho que é por isso que o Discourse usa uma combinação de cores genéricas padrão para os idiomas. Se bem me lembro, houve alguns relatos no passado sobre a dificuldade de leitura no modo escuro, etc…

---

Para alterá-lo apenas para Swift, você precisa criar um novo componente de tema ou adicionar isso a um existente. Nota: Essas cores também serão usadas no modo escuro (fundo branco, etc.), portanto, se você quiser cores diferentes no modo escuro, precisará criar novas definições de cores dark-light-choose().

Comum / 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

Depois