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

[rwietter]

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.

Na busca

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.

Na busca