Javascript - Coloração sintática em suas páginas web

Dezembro 2016


Se você tem um site com exemplos de código (php, javascript, C#, Delphi, Python...), pode ser interessante ter uma coloração sintática.

Às vezes é difícil fazê-lo, mas existe uma biblioteca Javascript que permite colorir automaticamente o seu código C#, Delphi, Javascript, php, Python, Sql, Visual Basic, SQL e XML: dp.SyntaxHighlighter

É bem feito, leve, eficaz e, além disso, não causa quaisquer problemas em máquinas sem Javascript.

Homepage:
http://code.google.com/p/syntaxhighlighter/

Exemplo:




Veja como implementá-lo:

1)
Copie SyntaxHighlighter.css e todos os arquivos .js no mesmo diretório que a sua página.


2)
Inclua a folha de estilo fornecida no topo da sua página:
<link type="text/css" rel="stylesheet" href="SyntaxHighlighter.css">



3)
Adicione o seguinte código Javascript no final da sua página:
<script language="JavaScript" src="shCore.js" type="text/javascript"></script> 
<script language="JavaScript" src="shBrushPython.js" type="text/javascript"></script> 
<script language="JavaScript" type="text/javascript">dp.SyntaxHighlighter.HighlightAll('code');</script>


(Aqui, incluímos o Javascript para a linguagem Python. Você pode incluir o da linguagem que te interessa dentre as disponíveis).


4)
Coloque o seu código a ser colorido em um <textarea> (área de texto).
Por exemplo:
<textarea name="code" class="python"> 
class client: 

    def __init__(self,number,name): 
        self.number = number  # Client number 
        self.name = name      # Full client name 
         
    def __repr__(self): 
        return '<client id="%s" name="%s">' % (self.number, self.name)         
</textarea>


name="code" usado para indicar que este bloco de código deve ser colorido.
class="Python" indica que linguagem utilizar.



Você pode usar opções tais como:

nogutter : não exibir os números de linha.
nocontrols: retirar a barra "view plain | print | copy to clipborard"
collapse: ocultar o código (clicar para exibir o código)
firstline[n]: indica o número da primeira linha (para mudar a numeração, prático âra extrair fontes)


As opções são adicionadas à "class", por exemplo:
<textarea name="code" class="python:nogutter:nocontrols">

Você pode personalizar facilmente as cores da coloração, alterando a folha de estilo SyntaxHighlighter.css


Uma alternativa, caso o site seja em PHP, é usar o excelentíssimo Gesher, muito simples e eficaz http://qbnz.com/highlighter/. Ele tem, por padrão, várias dezenas de linguagens e é quase infinitamente expansível.

Veja também



Tradução feita por Lucia Maurity y Nouira

Veja também

Artigo original publicado por . Tradução feita por pintuda. Última modificação: 10 de junho de 2011 às 10:40 por pintuda.
Este documento, intitulado 'Javascript - Coloração sintática em suas páginas web', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.