-->

INSERINDO LINHAS DE CÓDIGOS EM POSTAGENS DO BLOGGER

Autor: Emerson Farias
Dentre muitos problemas encontrados por quem utiliza o Blogger, é que ele é muito limitado de recursos se comparado com outras ferramentas para Blogueiros como o Wordpress por exemplo.

Motivado por minha própria necessidade e por ser um usuário do Blogger, comecei a pesquisar algum recurso em que poderia mostrar ao visitantes de meu Blog, códigos fontes de alguma linguagens de programação HTML, CSS, JavaScript, PHP, C# entre outras.  

Mas neste caso, além de exemplificar o código precisava também mostrar o resultado, isto é, retornar ao visitante o código fonte em execução. Foi outra dor de cabeça! Neste caso, achei algumas soluções para os dois casos, e é o que vou tentar mostrar da melhor maneira possível a seguir.


INSERINDO O CÓDIGO FONTE NO POST  

Para a primeira situação, onde eu precisava por exemplo mostrar ao visitante um código HTML por exemplo, encontrei alguns sites que geram o código também no formato HTML com algumas formatações em CSS. Assim é só inserir o código desejado e o gerador devolve o código prontinho para colar no modo "HTML" da postagem. É simples, porém trabalhoso.

Segue os melhores geradores que encontrei para esta função:

Ngoctan´s Blog 

Code Formatter

Hilite

No exemplo abaixo, utilizei o gerador Ngoctan´s Blog, citado acima, servindo perfeitamente para o que eu estava necessitando:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1   {color:blue;}
p    {color:green;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Todos estes geradores, praticamente funcionam da mesma maneira, digitamos o código fonte numa caixa, escolhemos uma das pre-formatações disponibilizadas e clicamos em um botão para que o site gere um código HTML que formata código inserido, é possível ver o resultado em um preview no próprio site. Em seguida é só copiar e colar o código gerado no em seu Post, lembrando que quando você estiver na tela de digitação do Post, é necessário clicar na aba "HTML", e em seguida colar o código gerado na posição desejada.



MOSTRANDO O CÓDIGO FONTE EM EXECUÇÃO NO POST  

Agora se você deseja mostrar o resultado do código na página, isto é, o script em execução, a única saída que encontrei para essa finalidade, foi uma biblioteca JavaScript chamada PrettyPrint.

Veja como implantar esta biblioteca em seu Blogger:

1. Na área de Administração do seu Blog, clique em "Layout" na barra de navegação à esquerda.
2. Clique em "Adicionar um Gadget" em qualquer lugar em seu Layout, de preferência em algum lugar na parte inferior da página.
3. Na lista de Gadget, escolha "HTML/JavaScript" que fica na guia de Gadgets Básicos, este Gadget é responsável por adicionar funcionalidades ao seu blog.
4. Em seguida adicione o seguinte código no campo "conteúdo" do Gadget, em seguida clique no botão "Salvar".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script type="text/javascript">
    var checkJsTimer;
    function checkJs() {
        if (typeof prettyPrint == 'function') {
            window.clearInterval(checkJsTimer);
            prettyPrint();
        }
    }
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.type = 'text/javascript';
        element.src = "http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js";
        document.body.appendChild(element);
        checkJsTimer = window.setInterval(checkJs, 100);
        element = document.createElement("link");
        element.rel = 'stylesheet';
        element.type = 'text/css';
        element.href = "http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css";
        document.getElementsByTagName('head')[0].appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

5. O último passo é simples, é só adicionar o código fonte que você deseja que seja interpretado e visualizado pelo vistante do site, para isso, lembre-se que é necessário estar na guia "HTML" da tela de "Postagem" do Blogger e inserir o código desejado dentro das tags conforme o exemplo a seguir:

<pre class=”prettyprint”> INSIRA O CÓDIGO FONTE AQUI…</pre>

Com um código exemplo seria assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<pre class=”prettyprint”>

<!DOCTYPE html>
<html>
<head>
<title>Pagina Teste</title>
</head>
<body>

<h1>Biblioteca JavaScript PrettyPrint</h1>
<p>Aqui é apenas um teste para ver como funciona a biblioteca.</p>

</body>
</html>

</pre>

Para finalizar, como ele é mostrado para o visitante:



Pagina Teste





Biblioteca JavaScript PrettyPrint

Aqui é apenas um teste para ver como esta biblioteca em funcionamento.







































4 comentários:



































        

      









Assinar:
Postar comentários (Atom)