Desenvolvendo Software

Muitas vezes se faz necessário incluir código fonte em blogs. Há várias soluções, podendo ser resumidas em: plugins, scripts PHP, JavaScript e colar e copiar. Nesse blog optei pela última por ser rápida, tanto para o servidor quanto para o cliente. Para isso, uso o software Highlight. O programa gera o CSS necessário, já vem com várias modelos de cores. O uso do CSS tem a vantagem de permitir a troca do modelo de cores, apenas mudando o templare. É possível que a ferramenta de blogar que você use não permita que mude o CCS, como o WordPress grátis.

1 – A interface do programa

A interface do programa é simples, vamos começar com a figura 1. Na posição (1) aparece o menu, isso mesmo, apenas 2 opções. É possível abrir mais de um arquivo ao mesmo tempo e eles aparecem na posição (2). Em (3) temos uma pré-visualização de como ficará a conversão. As opções mais importantes de (4) são:

• Add line numbers – se estiver selecionada, os números de linha serão adicionados e o número à direita (2 na figura) indica o espaço mínimo ocupado pelo número. Essa opção existe para evitar que o código fique desalinhado devido aos números de linhas.
• Pad with zeros -Se estiver selecionada zeros são colocados à esquerda do número, se não estiver, espaços são colocados à esquerda.
• Omit header and footer – Se estiver selecionada, o cabeçalho nem o rodapé do arquivo HTML é gerado. Depois haverá um exemplo.

Na posição (5) o botão Convert Files gera arquivos com o código e o botão Clipboard copia o código para a área de transferência. Veremos adiante que esta é uma opção muito prática.

Na figura 2, temos uma nova tab: Output Specific. Primeiro temos dois checkboxes: Embed Style (CSS) e Inline CSS. A primeira opção inclui o estilo CSS no código gerado. Se a segunda estiver checada também, a formatação não dependerá do CSS. Informações de fonte, cores, etc, estarão especificadas em cada elemento. Esta última opção é útil para os casos onde não é possível modificar o CSS, como a hospedagem gratuita do WordPress.

Na figura 3, ainda na tab Output Specific, em Misc, há uma opção bem interessante: “Enclose in pre tags”. Esta opção pode ser selecionada quando se omite o cabeçalho e o rodapé (figura 1). Neste caso, o programa porá automaticamente as tags

. Neste caso, o código formatado estará pronto para ser copiado e colado na post (lembra do botão clipboard). A tab Formating possui opções para mudar as cores, fontes, etc (figura 4). Eu uso o tema acid.

2 – Configuração do Template

Na configuração do template do blog colocamos as definições CSS. Isso é necessário apenas uma vez.

• Escolha um arquivo qualquer e gere a saída com as cores e fontes desejadas. A opção Omit header and footer (figura 1) precisa estar desabilitada e a opção Embed style(css) (figura 2) precisa estar habilitada.
• O trecho de código abaixo mostra as definições criadas pelo programa. É necessário copiar o conteúdo da linha 7 até a linha 23 e colar no template.

WordPress: Aparência->Editor->style.css (figura 5)
Blogger: Layout -> Editar HTML -> Editar Modelo (figura 4)
Lembre-se de fazer o back-up antes de qualquer alteração!

 5 <style type="text/css">
 6 <!--
 7 body.hl	{ background-color:#eeeeee; }
 8 pre.hl	{ color:#000000; background-color:#eeeeee; font-size:8pt;
 9 font-family:'Courier New';}
10 .hl.num { color:#800080; font-weight:bold; }
11 .hl.esc { color:#ff00ff; font-weight:bold; }
12 .hl.str { color:#a68500; }
13 .hl.dstr { color:#0000ff; }
14 .hl.slc { color:#f27900; }
15 .hl.com { color:#ff8000; }
16 .hl.dir { color:#0080c0; font-weight:bold; }
17 .hl.sym { color:#ff0080; font-weight:bold; }
18 .hl.line { color:#303030; }
19 .hl.mark	{ background-color:#ffffbb;}
20 .hl.kwa { color:#bb7977; font-weight:bold; }
21 .hl.kwb { color:#8080c0; font-weight:bold; }
22 .hl.kwc { color:#0080c0; }
23 .hl.kwd { color:#004466; }
24 //-->
25 </style>

3 – Geração do código formatado com cores

Depois da alteração dos templates, eu deixo as opções Omit header and footer e Enclose in pre tags habilitadas. Abro os arquivos cujo código desejo formatar e clico em Clipboard e depois colo no editor de postagens. Às vezes é necessário fazer alguma formatação adicional. A borda em volta do meu código é uma formatação extra que inclui no meu CSS.

pre.hl	{ color:#000000; background-color:#eeeeee; font-size:8pt;
font-family:'Courier New'; border-style:solid; border-width:3px; padding:3px;}