quinta-feira, 14 de julho de 2016

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.


SyntaxHighlighter #4 - Atributos e parâmetros


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.

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!
Luiz Fagner Zordan Analista de Sistemas

Graduado em Sistemas de Informação, atualmente trabalhando na Embraer pela FocusNetworks como FullStack. Sou apaixonado por tecnologia, fascinado por jogos e adoro passar o tempo assistindo séries.