O seu blog é de programação? precisa mostrar um código para seus leitores? Usa Blogger ou WordPress? Relaxe porque nesse post criamos um tutorial com código pronto para você colocar no seu blog e começar a compartilhar seus códigos sem precisar redirecionar seus leitores para outro lugar.
Não é necessário quebrar a cara para colocar esse componente no seu blog porque ele funciona em todos os CMS que aceitam templates personalizados, como o Blogger e o WordPress por exemplo. Mas perceba que é necessário ter conhecimentos em HTML5, CSS3 e JavaScript para entender o que estamos fazendo, nada disso te impede de seguir com o tutorial, no entanto, saber o que se está fazendo pode evitar bugs ou erros indesejados, por isso, sempre faça backup do seu código antes que edita-lo, recomendo isso para todos.
Como funciona?
Para esse tutorial precisamos usar a tag <pre></pre> porque ela é utilizada para representar textos pré-formatados, exibindo-os em uma fonte monoespaçada, como a Courier, e mantendo a disposição original do texto, incluindo os espaços em branco. Também fizemos uma edição simples em CSS3 que você pode modificar tudo para deixar com a cara do seu blog.
Deixando as coisas mais bonitas
Vamos começar pelo CSS3, formatando as classes, quem estudou a parte de estilo sabe do que eu tô falando, cada classe representa uma caixa diferente, eu quero deixar isso igual ao VisualStudio Code então vamos fazer isso da seguinte maneira
<style>
pre.codeline{
background-color:#34495e;
font:normal normal 16px/18px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
color:white;
overflow:auto;
margin:0 0 1em;
padding:1em; border-radius: 5px;
}
pre.codeline,
pre.codeline .line-number{
font:normal normal 16px/18px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
display:block;
white-space:pre;
}
pre.codeline .line-number{
float:left;
margin:-1em 1em -1em -1em;
text-align:right;
background-color:#2c3e50;
color:white;
padding:1em .2em 1em .2em;
border-right:4px solid #2c3e50;
}
pre.codeline br{
display:none;
}
pre.codeline .line-number span{
display:block;
padding:0 .7em 0 1em;
}
pre.codeline .cl{
display:block;
clear:both;
}
</style>Colocando números nas linhas de código
Para isso temos que usar o bom e velho JavaScript que é uma linguagem de programação bem completa que vai ser útil para resolver esse problema que não é um bixo de 7 cabeças. Caso não entenda nada de JavaScript siga essa parte do tutorial ao pé da letra
<script>
//<![CDATA[
var pre=document.getElementsByClassName("codeline"),pl=pre.length;for(var i=0;i<pl;i++){pre[i].innerHTML='<span class="line-number"></span>'+pre[i].innerHTML+'<span class="cl"></span>';var num=pre[i].innerHTML.split(/\n/).length;for(var j=0;j<num;j++){var line_num=pre[i].getElementsByTagName("span")[0];line_num.innerHTML+="<span>"+(j+1)+"</span>"}}
//]]>
</script>Caso seu template não seja construído em XML igual ao do Blogger, você pode remover a tag <![CDATA[]]> e o comentário do seu código em JavaScript. Perceba que isso é opcional e seu código vai funcionar perfeitamente sem fazer isso.
Como usar o componente
Depois de colocar todos os códigos no seu template você vai precisar converter alguns caracteres em simbolos especiais para que o seu blog não confunda o que é tag e o que é texto comum, e sim você vai converter apenas o código que deseja compartilhar. Para fazer isso mais rápido usamos o site 4devs. Após esse processo cole seu código modificado dentro da tag <pre></pre> com classe .codeline e o seu código vai ficar lindo no seu blog
<pre class="codeline">
Seu código fica aqui...
</pre>E pronto!!! esse foi o post de hoje... tchau
