Colorir código Python em blocos

[Nilo Menezes]

Olá,

Eu estava visitando o site http://toplap.org/temporal-recursion/

e achei muito legal a forma de colorir e apresentar os blocos.

Como em Python dependemos da identação, eu acredito que visualizar o código com blocos coloridos pode ser uma boa ideia. Cores (quando bem escolhidas :-D) ajudam muito a marcar áreas.

Eu andei procurando um utilitário que faça isso, mas não encontrei nenhum.

Resolvi então escrever um script tosco para testar.

Ele pode ser baixado daqui: http://www.nilo.pro.br/html/testes/tok.py

E como exemplo da saída:

http://www.nilo.pro.br/html/testes/tok.html

http://www.nilo.pro.br/html/testes/forca.html

Ainda tem vários bugs, como identação de listas em múltiplas linhas e outras coisinhas.

Alguém acha a ideia interessante?

Eu precisaria de uma ajuda para escolher cores :-D e se alguém topar, melhorar  o script.

O script ficou um pouco complicado na hora de trabalhar com o elemento pre do html. Eu gostaria de saber uma forma mais interessante de mudar a cor de fundo da linha, sem ter que adicionar espaços em branco. No script, vocês podem ver que faço uma representação html e outra texto da saída, apenas para calcular o tamanho da linha.

[]

Nilo Menezes

PS: roda com Python 3. Não testei com Python 2.x!

[Filipe Cifali]

Achei bem legal, talvez ao invés de mudar para azul, alternar entre diversos tons da cor principal(laranja) cada vez mais claras e ir mudando a cor da fonte da letra também. 

--
------------------------------------
Grupo Python-Brasil
http://www.python.org.br/wiki/AntesDePerguntar
 
<*> Para visitar o site do grupo na web, acesse:
http://groups.google.com/group/python-brasil
 
<*> Para sair deste grupo, envie um e-mail para:
python-brasi...@googlegroups.com

--
[ ]'s

Filipe Cifali Stangler

[Mário Neto]

Achei muito bacana a ideia, porém, IMHO, já que o background é branco poderia ir apenas deixando os blocos mais escuros em tons de cinza dependendo da profundidade do bloco, iniciando de um cinza bem claro, pode até ser feito através de um simples calculo hexadecimal que vai ficando um pouco mais escuro.

Att. Mário Araújo Chaves Neto

Programmer, Designer and U.I. Engineer

MBA in Design Digital - 2008 - FIC

Analysis and Systems Development - 2011 - Estácio

Design and Implementation of Internet Environments - 2003 - FIC

[Nilo Menezes]

Eu achei muito bacana quando vi no site. Acho que até para imprimir código Python pode ajudar.

Pode servir também para uniformizar as identações, mas isso eu vou fazer esta semana.

No espirito Open Source, vocês poderiam enviar as cores?

Todas são definidas logo no início do Script:

COLORS =  [  "#FFFF99",  "#FF6600", "#FF9966","#66CCCC", "#CCFFCC"]

STYLES = {
            "command":  "color: #000000;font-weight: bold",
            "variable":  "'color: #000000'",
            "in":  "color: #000000;font-weight: bold",
            "symbols": 'color: #660000',
            "comma": 'color: #ff00CC',
            "othersymbols": 'color: #0033ff',
            "string": 'color: #006600',
            "comment": 'color: #009900'        
          }

As cores de COLORS são recicladas, ou seja, ao chagar na última, ele volta a utilizar a primeira.

O duro de escolher as cores é fazer com que elas combinem com as outras, ou seja, COLORS devem combinar com as cores definidas em STYLES.

Uma dica é usar o Chrome e chamar o utilitário de desenvolvimento. Lá você pode escolher as cores e ele muda na hora, sem precisar rodar o script novamente.

Eu tentei várias combinações, mas eu sou muito ruim para escolher cores :-D

Eu consegui achar um jeito de eliminar os espaços em branco no fim das linhas, usando CSS.

Hoje a noite vou tentar melhorar o script.

Eu sou nulo para cores. Qualquer ajuda é muito bem vinda.

Se mais alguém se interessar, eu posso publicar uma versão onde as cores venham num arquivo de configuração.

[]

Nilo

[Anderson Unsonst]

A ideia é super bacana, mas se me permite a sugestão, deixe o fundo
com uma cor somente de preferência branco, olhando para o exemplo do
seu script parece que estou olhando pro sol de tão forte que ficou o
fundo.

Tente usar guias que ajudem na indentação, olhe esse exemplo para emacs

https://github.com/antonj/Highlight-Indentation-for-Emacs/blob/master/highlight-indentation.el

Olhe essa combinação de cores, talvez ajude:
http://www.brunoavila.com.br/avante/wp-content/uploads/2008/09/windowslivewriteramelhorcombinaodecores-14e58colorcombo-2.jpg

[Christian S. Perone]

Tem o vim-indent-guides que faz algo parecido também: https://github.com/nathanaelkane/vim-indent-guides

--
------------------------------------
Grupo Python-Brasil
http://www.python.org.br/wiki/AntesDePerguntar

<*> Para visitar o site do grupo na web, acesse:
    http://groups.google.com/group/python-brasil

<*> Para sair deste grupo, envie um e-mail para:
    python-brasi...@googlegroups.com

--
"Forgive, O Lord, my little jokes on Thee, and I'll forgive Thy great big joke on me."
http://pyevolve.sourceforge.net/wordpress/

[Nilo Menezes]

Oi Anderson, Christian,

Entendo que ficou forte, mas as cores são configuráveis.

A ideia é disponibilizar as listagens desta forma, para consulta e talvez impressão.

Usar no editor de texto seria muito bom. Guias são interessantes, eu não conhecia o vim-indent-guides.

O problema de guias é que para blocos pequenos a separação não fica tão clara quanto mudando a cor de fundo do bloco.

O objetivo é apresentar como na imagem no link original que enviei, talvez isto explique as cores horrendas :-D

Vou fazer um teste com a barra de bloco colorida.

Cor para mim é um valor em hexa ou rgb :-D

[]

Nilo

[Paul Eipper]

Não seria melhor fazer divs e mudar a posição deles de acordo com a identação?

--
Paul Eipper


2012/11/19 Nilo Menezes <pytho...@gmail.com>:

[Mário Neto]

Gostei muito do exemplo do vim indent guides, no caso poderia ser feito com uma div com bg cinza e uma dentro com o bg branco que seria a do texto, a div com bg cinza ficaria alterando entre 2 tons de cinza.

[Nilo Menezes]

O uso de div para isso foge ao meu CSS/HTML-fu.

Eu consegui mostrar a linha colorida, sem os espaços em branco no fim reordenando os span.

Um snippet ajudaria muito. Lembro que meu objetivo é mostrar os blocos coloridos, como mostrado no link original. O esquema das linhas como no vim-indent é bacana, mas opcional.

Eu vou postar uma atualização com os dois formatos. Se com div for mais fácil, eu mudo sem problemas, mas preciso de um exemplo.

[]

Nilo

PS:O script é open source, pode mudar sem problemas.

[Nilo Menezes]

Consegui fazer as alterações, agora o programa pode gerar vários tipos de listagem: em blocos, com barras e blocos parciais.

Ele também pode uniformizar os tabs e aceita vários parâmetros. Ainda tem alguns bugs, mas já começa a fazer algo útil.

Usage:

tok.py [options] [input_file] [output_file]

  Options:

  -k               keep tabs (don't change tabs on source)

  -c               don't fill with block color after end of line

  -n               disable colored blocks

  -l               draw a line instead of a block (disables colored blocks)

  

  --line-width=n   where n is number of chars to use on line. Default: 1

  --depth-char=c   where c is a char that fills the depth line. Default: " "

  --depth-filler=c where c is a char that  fills the tab after depth-char. Default: " " 

  --tab-width=n    where n is the number of chars to use on each level. Default: 4

  --help           prints help 

Eu atualizei o tok.py e o forca.html no site.

Com blocos:

http://www.nilo.pro.br/html/testes/forca.html

Eu também coloquei os resultados com as opções -k, -c, -n e -l.

Para ver o resultado, acrescente a opção após forca na URL:

forca-l.html

forca-k.html

forca-n.html

forca-c.html

Para ver os fontes, substitua forca.html por tok.py ou tok.html

Não colo todos os links porque o Google filtra as mensagens e acaba indo para o lixo se eu postar vários links :-(

[]

Nilo

[Mário Neto]

Show de bola Nilo, gostei dos resultados! =)