Alterar estilo dos blocos de código inline para que se destaquem mais

Tenho um cliente do Teams solicitando blocos de código em linha que se destaquem mais. Atualmente, seja no modo escuro ou claro, o bloco de código não é muito diferente em cor de outros textos. Poderíamos alterar a cor do texto por padrão no Discourse para que uma cor diferente seja usada e se destaque mais, por exemplo, vermelho?

Sei que para a maioria dos clientes isso não é um grande problema porque eles podem personalizar o tema para alterar o CSS em seu site, mas para o Discourse for Teams esse nível de personalização não é possível. Enquanto isso, para equipes que discutem código, é muito importante que ele se destaque como algo muito diferente do outro texto.

2 curtidas

Obrigado, Tobias. Para constar, eu sou o cliente e quero enfatizar que estou falando exclusivamente sobre blocos inline. Não tenho nenhuma preocupação com multilinhas.

2 curtidas

Sim, os blocos de várias linhas são muito legais.

Existem outras maneiras de
destacar texto, mas obviamente as crases são as mais rápidas.

2 curtidas

Para constar, se você é um novato em HTML como eu (tive que pesquisar):

  1. <kbd>Fancy!</kbd> é feito com <code><kbd>Fancy!</kbd></code>
  2. <ins>Ohhhh!</ins> é feito com <code><ins>Ohhhh!</ins></code>

É útil saber, obrigado @tobiaseigen.
Ainda acho que faria sentido ajustar o CSS para isso também. Temos alguns posts técnicos que usam muito as crases, e usar as 2 alternativas definitivamente não é tão amigável para o usuário.

3 curtidas

Uma dica para a próxima vez: basta citar a postagem onde você quer saber como fazer isso, então você poderá vê-la.

3 curtidas

Desculpe por isso! Normalmente eu revelaria o truque, mas estava no meu celular e com um pouco de pressa.

Outro truque útil para ver como uma postagem foi criada é usar o URL bruto, por exemplo: https://meta.discourse.org/raw/57255/7

4 curtidas

Ah, existe uma terceira forma de destacar que também é legal e que eu continuo esquecendo. Fica assim e é feita usando esta marcação HTML <mark>texto</mark>. Existe um componente de tema contribuído pela comunidade (não disponível no Teams) que permite usar ==texto== em vez disso, o que é bastante útil. Não estou encontrando imediatamente por algum motivo.

Mas, de qualquer forma, vou discutir com meus colegas sobre a atualização do estilo padrão dos blocos de código para que sejam mais óbvios. Talvez até mesmo tornar a cor de fundo do bloco de código mais distinta seja suficiente.

3 curtidas

Tenho um PR para alterar os blocos de código inline no core aqui: PR: Inline code block styling edits by jordanvidrine · Pull Request #16394 · discourse/discourse · GitHub

6 curtidas

Desculpe… revertendo isso por enquanto.

3 curtidas

O código inline sempre pareceu código normal, em uma fonte monoespaçada (monospace). Qualquer coisa muito brilhante e chocante dependeria muito da comunidade e definitivamente não seria consistente com a forma como vejo código usado na maioria dos lugares na web.

A questão do realce de sintaxe é diferente; você precisaria de várias linhas de código para determinar com qual sintaxe está lidando. Talvez essa tenha sido a raiz do problema – se você quer realce de sintaxe, precisa de um bloco de código, por exemplo.

var x, y, z;  // Declara 3 variáveis
x = 5;    // Atribui o valor 5 a x
y = 6;    // Atribui o valor 6 a y
z = x + y;  // Atribui a soma de x e y a z

document.getElementById("demo").innerHTML =
"O valor de z é " + z + ".";

Um único elemento código está divorciado de todo o contexto necessário para fazer o realce de sintaxe. Você poderia fazer uma única linha de JavaScript, no entanto:

"o valor de z é " + z + ".";

Que se parece com

``` javascript
"o valor de z é " + z + ".";
```

Então, acho que isso é sobre blocos de código versus uma palavra de código.

3 curtidas

Acho que @jordan.vidrine tem ordens aqui. Apenas para prosseguir e reverter totalmente a alteração. Talvez criar um componente de tema para “estilos de código alternativos”, ele pode usar totalmente o Slack em código inline e torná-lo vermelho, sendo um componente e tudo mais.

3 curtidas

Esta iteração recente foi um componente de tema ativo no Meta e não uma alteração real, então eu o desativei.

4 curtidas

Tudo bem não fazer essa alteração. :+1:

Acho que o pedido aqui foi realmente por uma maneira rápida e fácil de destacar texto em discussões. Muitas pessoas (eu incluída) passaram a usar crases para destacar texto porque é super fácil. Você nem precisa pressionar Shift, e é fácil de encontrar no menu. Mas não se destaca muito do resto do texto no parágrafo.

Negrito e itálico também estão no menu e também não se destacam muito. Outras maneiras de destacar texto inline exigem mais teclas. Além disso, não são documentados de forma proeminente, então também exigem conhecimento interno.

Até onde sei, estes são os melhores:

Botão <kbd>Botão</kbd>
Sublinhado verde <ins>Sublinhado verde</ins>
Riscado vermelho <del>Riscado vermelho</del>
Destaque <mark>Destaque</mark>
Riscado <strike>Riscado</strike>

Para quem pode instalar plugins, existe o plugin oficial Discourse BBCode color. E para aqueles que não podem instalar plugins, @merefield criou o componente de tema Discourse Coloured Text.

Também gostei do componente de tema que convertia ==destaque== para destaque, mas perdi o rastro dele aqui no meta.

3 curtidas

Isso precisaria ser feito em um plugin no momento, pois você gostaria de incorporá-lo ao HTML e não apenas realizar uma transformação do lado do cliente.

Olhando para https://markdown-it.github.io/ parece que agora está habilitado por padrão em markdown.it no modo não estrito @Vitaly?

3 curtidas

Interessante. Obrigado por explicar.

Encontrei o plugin que faz isso aleatoriamente hoje enquanto rolava pela categoria Plugin… engraçado como em alguns casos você simplesmente não consegue pensar na palavra-chave certa para encontrar um plugin. :rofl:

2 curtidas

Ah, entendi… a implementação raiz está aqui:

1 curtida

Independentemente da solução, acho que há um problema claro de UX com o design atual do bloco de código. O contraste é quase inexistente.

Para citar @codinghorror, eu diria, ao contrário, que “a maioria dos lugares na web” não apresenta esse problema.

Veja o GitHub:

ou o Slack:
image

ou até mesmo o Notion
image

Eu argumentaria que tanto a sublinhado verde quanto a destaque têm o problema exatamente oposto, com contraste desnecessariamente super alto, mas isso é mais uma questão de gosto do que um problema de UX.

Que tal implementar a abordagem do GitHub com um fundo cinza mais escuro e algum preenchimento?

2 curtidas

Onde isso se complica é defender uma grande mudança em todas as instâncias do Discourse, muitas das quais estão acostumadas ao estilo suave atual. Este é um movimento de queijo importante.

A solução alternativa de apenas adicionar CSS já existe para a maioria das instalações.

1 curtida