Estilo CSS para código em seu blog

css

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!

3 Comentários

  1. 1
  2. 2
  3. 3

O que você acha?

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.