Uma "imagem" diz mais que muitas palavras não é verdade!? Então convido a ver o:
Exemplo
Nesta image vemos algumas "tags" formatado nas cores "vermelho(red), marrom(maroon) e azul(skyblue)"
O que pretendo com isso é fazer o que um programa/software editor HTML ja faz. Isto é, todo o processo que destaca as tags.
Veja um código de exemplo logo abaixo feito manualmente:
Código
function Tag()
{
// Faz alguma coisa para setar as cores
...
// Fim de rotina cores sortidas
}
Tag();
div.code
{
border: thin solid silver;
width:720px;
height:390px;
}
<div class="code">
<pre>
01 - <!DOCTYPE html>
02 -
03 - <html lang="en">
04 - <head>
05 - <meta charset="utf-8"/>
06 - <title>Centralizar DIV</title>
07 - <link href="centralizar.css" rel="stylesheet" type="text/css"/>
08 - </head>
09 - <body>
10 -
11 - <div id="site">
12 -
13 - <h1>Edu??o superior na regi??o de camplinas</h1>
14 -
15 - <p>Resultado do Censo 2010 mostra o percentual da popula??o
16 - das cidades da regi?o de Camplinas com forma??o superior.
17 - Compara??o com a m?dia do estado de SP e nacional</p>
18 -
19 - <img src="grafico.jpg" alt="Gr?fico"/>
20 -
21 - </div>
22 -
23 - </body>
24 -
25 - </html>
</div>
Sabemos que isso é útil para escrevermos artigos e mostrarmos um trecho do código de maneira destacada e bem apresentada no Site/Blog.
Lembrete
Não estou buscando modificar cores de texto, mas sim, a cor das tag HTML, é totalmente o inverso ao contrário do conceito de estilizar um elemento com CSS.
Dúvida
Como farei este efeito, da "image" no "código"?