Já me perguntaram como criar uma caixa personalizada para exibir os códigos quando publicados dentro do post.
A caixa de código é muito utilizada por blogs que publicam códigos para serem copiados, como é o caso do Mundo Blogger.
É um recurso muito útil, pois facilita que o leitor diferencie o que é texto e o que é código.
Alguns usuários publicam os códigos dentro do blockquote, mas existe uma forma bem melhor e mais personalizada, sem precisar usar o blockquote.
Eu particularmente prefiro deixar o "blockquote" somente para destacar textos, ou fazer alguma observação.
Desta forma cada tipo de conteúdo terá a sua própria caixinha: o que for citação = blockquote, e o que for código = caixa exclusiva para códigos.
Para criarmos a caixa de códigos, precisaremos incluir códigos CSS no template.
Vou disponibilizar 2 modelos de caixa, assim é só você escolher qual prefere usar no seu blog e aplicar os estilos de acordo com o seu gosto.
Neste tutorial veremos o modelo de caixa simples, e no próximo artigo, veremos um outro modelo de caixa mais personalizada.
Vamos ao procedimento:
.gif)



