Preocupação inicial
Um ponto que influência muito na qualidade de um post de tech, na minha opinião, são os blocos de códigos bem formatados e que também esteja fácil de copiar para a área de transferência.
Por esse motivo, procurei entender o que poderia ser usado para deixar os blocos deste site iguais ao desse aqui
Como funciona no Jekyll
A partir do jekyll 3 ele já vem com o Rogue incorporado, que fica responsável por destacar os trechos de código de acordo com a linguagem informada (possui algo em torno de 100 linguagens).
E como engine para entender e processar o markdown o Jekyll utiliza o kramdown que já vem por padrão configurado.
Ativando o Markdown
Para “ativar” o markdown em uma página específica, verifique se ela possui a extensão .md e além disse podemos usar as seguintes configurações:
# de forma global no arquivo "_config.yml"
kramdown:
parse_block_html: true
# Ou adicionar no inicio do arquivo .md
{::options parse_block_html="true" /}
# Ou adicionar markdown="1" em algum bloco html
<article markdown="1"></article>
Hora de configurar o Rogue
Toda essa parte de cima foi para ativar o Markdown, porém ao utiliza-lo para destacar um trecho de código ele fica muito simples e ruim de ler.
Com isso vi que o Rogue possui alguns templates com CSS jã montados e com muitas opções disponíveis.
Escolhi o monokai e ainda customizei mais um pouco para ficar igual ao do dev.to
.highlight pre {
background-color: #272822;
border-radius: 7px;
padding: 10px;
width: 80%;
margin: 0;
overflow: auto;
}
E para finalmente especificar o trecho de código que queremos destacar bastar utilizar esse padrão:
{% highlight ruby %}
# trecho que deverá aparecer formatado
def soma(numero1, numero2)
numero1 + numero2
end
{% endhighlight %}
Impressão final
Tudo funcionou muito bem e fica fácil de configurar com apenas o que eu preciso. Lembrando que ainda podemos adicionar coisas como número de linhas, linguagem utilizada e melhorar o estilo.
