levxyca / diciotech

O Diciotech é um dicionário tech online colaborativo, construído com HTML, SASS e JavaScript, e open source. Nossa missão é ajudar pessoas de todos os níveis a entenderem termos e conceitos relacionados à tecnologia de forma clara e simples.
https://diciotech.netlify.app/
GNU General Public License v3.0
448 stars 80 forks source link

Código renderizado em uma única linha e falta de recuo (indentação) #113

Open rwietter opened 1 year ago

rwietter commented 1 year ago

Descrição

Atualmente o código que possui múltiplas linhas é renderizado como se fosse uma única linha não recuada devidamente, o que torna difícil de ler nestes casos. Em teoria basta adicionar a tag <pre class="card__code"> antes de <code><code/> e mudar duas coisinhas no CSS white-space: pre-wrap e width: 100% em &__code.

<div class="card__content">
+   <pre class="card__code">
        <code>${card.content.code}</code>
+   </pre>
</div>
&__code
+    white-space: pre-wrap
+    width: 100%

Antes (atual)

Na renderização de todos os cards.

img

Na busca

img

Depois (fix)

Na renderização de todos os cards.

[!Important] Para ficar formatado assim, é necessário usar quebras de linhas e espaçamento. Na CLI que estou fazendo #112, o contribuidor colocaria o código formatado em um arquivo, a CLI faria a leitura e gravação do código com as quebras de linhas e espaçamentos já formatados. Caso a inserção seja manual no JSON, seria necessário colocar quebras de linhas espaçamento por conta própria.

img

Na busca

img