SyntaxHighlighter #4 - Atributos e funcionalidades

Fala galera que acompanha o blog...

Esse é o post mais bacana da série de post sobre SyntaxHighlighter, pois é agora que vamos aprender a como trabalha com o atributo class e definir diversas funcionalidades para nosso bloco de código.

Já aprendemos como adicionar blocos de código em nossos posts, caso tenha perdido, recomendo que volte e leia os posts anteriores para o melhor uso do componente.

Lista com todos os posts anteriores aqui.

Para apresentarmos um bloco de código é necessário 4 passos simples:

1. Alterar o modo de escrita de "Escrever" para "HTML";
2. Adicionar a tag <pre> </pre&gt que são as tags que indicam para o componente que o trecho interno deve ser interpretado para a linguagem definida no atributo class;
3. Adicionar o atributos class, indicando que o código deve ser interpretado para a linguagem informada;
4. Adicionar o trecho de código que será apresentado;

Um exemplo simples:

<pre class="brush: java">

public class Devic {

    public static void main(String[] args) {

        System.out.println("Falaa jovensss!");

    }

}

</pre>

O resultado é esse:

public class Devic {

    public static void main(String[] args) {

        System.out.println("Falaa jovensss!");
    }
}

Dentro do atributo class eu informei que o componente deve interpretar o trecho de código como sendo linguagem java. Mas, o componente trabalha com diversas linguagens veja nesse link, as possibilidade, onde:

• Brush name, são exemplos de uso e a formatação quando informada cada uma das linguagens;

• Brush aliases: é o nome que deverá ser adicionado dentro do atributo class para identificar a linguagem que estamos utilizando no bloco de código, no exemplo acima utilizamos "java", pois é o alias utilizado para identificar que o código é java.

• File name: esse é o arquivo .js que deverá estar no seu código fonte. Para cada linguagem um arquivo .js deverá ser adicionado. O exemplo acima utilizando java só está funcionando, pois no código fonte do blog foi adicionado a seguinte linha de código:
• <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>

Vamos ver agora exemplos de todas as funcionalidades que podemos utilizar dentro do atributo class.

• auto-links: permite que você ative ou desative urls dentro do seu bloco de código, tornando-os clicáveis ou não;

• class-name: permite adicionar uma classe personalizada (ou várias classes) para cada elemento marcador dentro do seu bloco de código;

• collapse: permite adicionar um bloco de código "recolhido", que ao clicar exibe o seu conteúdo. Normalmente utilizado para evitar "spoiler" do código fonte; 

• first-line: é utilizado para alterar o contador das linhas do bloco de código. Imagine um tutorial onde a classe utilizado de exemplo possui 200 linhas e no tutorial você adota postar partes do código para explicar. Se a cada bloco de código esse número iniciar em 1 pode gerar dúvida, assim a cada bloco de códigos o ideal é iniciar o número da linha com o último valor do bloco de código anterior;

• gutter: exibe ou não os números da linha do seu bloco de códigos;

• highlight: possibilita a marcação de uma ou mais linhas dentro do seu bloco de código, dessa forma concentra-se a atenção do leitor para os trechos marcados, sendo fácil a explicação utilizando a marcação como referência;

• html-script: permite que você crie uma mistura de código HTML, XML e script, o que é muito comum no desenvolvimento web. Definir esse valor como true, requer que você tenha "shBrushXml.js" adicionado no seu código fonte e que o elemento "brush" dentro do atributo "class" ofereça suporte para este recurso;

• smart-tabs: permite ajustar o tamanho da guia, quando ligado ele segue exatamente os espaços de uma palavra para outra;

• tab-size: é parecido como o smart-tabis, no entando a quantidade de espaço é definida antes por um número inteiro de quantos serão os espaços entre uma palavra e outra;

• toolbar: exibe ou não a barra de ferramentas;

Na página oficial do componente é possível encontrar todas essas funcionalidades e exemplos de uso.

Todos essas funcionalidades podem ser usadas em conjunto, depende da sua necessidade.

É isso pessoal, qualquer dúvida estamos a disposição.

Até a próxima!