Em uma dessa pesquisas, encontrei o chamado Syntax Highlighter da Google, este, é um script em JavasScript que proporciona que blog e/ou site identificar o código postado formatando-o com cores e demais necessidade que ajude a identifica-lo.
Para tornar mais fácil o entendimento, veja abaixo um código simples de html, e observe que ele fica em um formato até mesmo com número de linhas
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Teste</title> </head> <body> </body> </html>
Para utilizar-lo no blog e/ou site, é preciso que seja adcionado é muito simples, primeiro você deve baixar os arquivos necessários do Syntax Highlighter nesse link,
Com os arquivos já baixados, basta adicionar o código abaixo no final do seu html (no Blogger, modo Editar HTML), antes do fechamento das tags </body> e <html>.
OBS:Você pode baixar os arquivos, e hospedá-los em um servidor e depois utilizar os links para esses arquivo a partir do seu servidor, porém, pode também utilizar os links dos arquivos diretamente do Google, como no exemplo que utilizo abaixo.
<!--GOOGLE SyntaxHighlighter-->
<link href='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shCore.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCSharp.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPhp.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushJScript.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushJava.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushVb.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushSql.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushXml.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushDelphi.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPython.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushRuby.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCss.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCpp.js'/>
<script class='javascript'>
//<![CDATA[
function FindTagsByName(container, name, Tag)
{
var elements = document.getElementsByTagName(Tag);
for (var i = 0; i < elements.length; i++)
{
if (elements[i].getAttribute("name") == name)
{
container.push(elements[i]);
}
}
}
var elements = [];
FindTagsByName(elements, "code", "pre");
FindTagsByName(elements, "code", "textarea");
for(var i=0; i < elements.length; i++) {
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
var childNode = elements[i].childNodes[0];
var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));
elements[i].replaceChild(newNode, childNode);
}
else if(elements[i].nodeName.toUpperCase() == "PRE") {
brs = elements[i].getElementsByTagName("br");
for(var j = 0, brLength = brs.length; j < brLength; j++) {
var newNode = document.createTextNode("\n");
elements[i].replaceChild(newNode, brs[0]);
}
}
}
//clipboard does not work well, no line breaks
// dp.SyntaxHighlighter.ClipboardSwf =
//"http://[YOUR HOST]/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
//]]>
</script>
<!--GOOGLE SyntaxHighlighter-->
Feita a alteração em seu HTML, no campo onde for digitar suas postagens, digitar seus códigos/scripts dentro de tags como <pre name="code" class="<nome_da_linguagem>">, dentro da class, você deverá informar qual tipo de linguagem utilizada, por exe: html, php, js, etc.
No exemplo do HTML acima utilizei a tag <pre> da seguinte forma:
<pre name="code" class="html">
Meu código html
</pre>
Bom, é isso ai, qualquer dúvida, deixem nos comentários.
1 comentários:
já tinha visto isso em alguns blogs, mas não sabia que era tão complicado para fazer....
Postar um comentário
Leia as regras:
Todos comentários são lidos e moderados previamente.
são publicados aqueles que respeitam as regras abaixo:
-Seu comentário precisa ter relação com o assunto do post;
-Não inclua links desnecessários no conteúdo do seu comentário
-Se quiser deixar sua URL, comente usando a opção Comentar como:OpenID
OBS: comentários dos leitores não refletem as opniões do blog.