Estilo CSS para código em seu blog

Um amigo meu me perguntou como criei as regiões de código em minha última entrada de blog. Na verdade, eu 'falsifiquei' a região do código utilizando um estilo. No Blogger, você pode editar seu modelo. Eu adicionei o seguinte estilo:

p.code {font-family: Courier New; tamanho da fonte: 8pt; estilo de borda: inserção; largura da borda: 3px; preenchimento: 5px; cor de fundo: #FFFFFF; altura da linha: 100%; margem: 10px}

A próxima etapa é editar minha tag no modo 'Editar Html'. Eu simplesmente aponto para o meu novo estilo fazendo a etiqueta. Voila! Dividindo os estilos:

• Defina a fonte para Courier New ... parece um editor de código genérico
• Defina o tamanho da fonte para 8pt para parecer certo
• Defina o estilo da borda do parágrafo como 'inserido'. Isso replica a aparência de uma textarea na página.
• Defina a largura da borda em 2 ou 3 pixels. Isso faz com que o estilo de borda inserido pareça correto.
• O preenchimento define a distância entre a borda e o texto interno.
• Cor de fundo ... defina para branco (#FFFFFF)
• Altura da linha - ajustei para 100% porque alguns dos outros estilos no tema do meu blogger tornaram a altura da linha em cerca de 200%
• Defina a margem para 10 px. Isso move o parágrafo (tag p) 10 pixels para longe de tudo.

Isso é tudo que há também! Uma observação: o editor que acompanha o Blogger não é capaz de exibir o como ele aparecerá em seu blog. Mas funciona e parece ótimo!

Mais uma observação ... depois de fazer a edição na tag, o editor do Blogger gosta de usá-la aleatoriamente em outro lugar em sua postagem. É um pouco chato! Meu conselho seria escrever sua postagem inteira e, em seguida, fazer uma pequena edição.

Uma nota final ... certifique-se de usar entidades HTML para exibir seus símbolos! Alguns exemplos:

• As citações (“) são“
• > é>
• > é>

Happy Coding!