PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

21/04/2014

Plugin Syntax Highlighter para o WordPress

Plugin Syntax Highlighter para o WordPress

O que é Syntax Highlighter

Para quem ainda não conhece, Syntax Highlighter (Realce de sintaxe) é uma ferramenta disponível em alguns editores de texto ou em alguns CMS - Sistema de gerenciamento de conteúdo (Content Management System em inglês), que altera a formatação de parte do conteúdo de um blog, permitindo que seus leitores possam entender melhor os códigos de programação publicados.

É ideal para quem quer compartilhar ou exemplificar trechos de programação, códigos e/ou scripts em HTML, JavaScritp, CSS, PHP, Java, Asp, etc….

Veja um exemplo abaixo:

Plugin Syntax Highlighter para o WordPress

Como o WordPress não possui esta funcionalidade por padrão, vamos mostrar neste artigo como inserir e utilizar o plugin Crayon Syntax Highlighter no seu blog.

O plugin Crayon Syntax Highlighter é perfeito. Suporta vários idiomas, linguagens de programação, temas e fontes a partir de uma URL, arquivo local ou de um texto publicado. Veja a seguir como instalar e utilizar o plugin…

Obs.: Se você usa o Blogger, leia Prettify Syntax Highlighter no Blogger

 

Criando uma página de teste

Antes de instalarmos o plugin, criamos uma página de teste (post) mostrando um código de programação antes de inserirmos o Crayon Syntax Highlighter, onde utilizamos o código abaixo:

<pre>

$(function() {

alert('Eu estou usando um plugin Syntax Highlighter');

});

</pre>

Adicionamos o código acima em um novo post.

Plugin Syntax Highlighter para o WordPress

Veja como aparece o código no blog antes de instarmos o plugin:

Plugin Syntax Highlighter para o WordPress

Instalando o plugin Crayon Syntax Highlighter

Acesse o WordPress na página administrativa: (Entre no seu blog e faça o login. Acesse o painel do Wordpress.org).

Plugin Syntax Highlighter para o WordPress

No menu lateral, selecione [Plugins] e clique em [Adicionar Novo].

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Em [Pesquisar] digite o termo “Crayon Syntax” e clique no botão [Pesquisar plugins].

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Encontrando o Plugin, clique em [Instalar agora].

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Clique em [OK].

image

Após a instalação clique no link [Ativar plugin]

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Pronto, plugin instalado e ativado.

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Usando o plugin – adicionar novo código

É realmente muito simples a utilização do plugin. Quando você adicionar um novo post, ou mesmo editar um post já publicado, verá uma nova tag denominada [cryon].

A imagem abaixo, veja a tag [crayon] no modo Texto (HTML).

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Ou no modo Visual, como mostra a imagem abaixo:

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Para mostrarmos como usar o plugin vamos voltar a nossa página de teste que criamos anteriormente. Vamos agora inserir o código HTML abaixo, usando a tag [crayon].

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /><meta name="description" content="a descrição do seu site em no máximo 90 caracteres"><meta name="keywords" content="escreva palavras-chaves curtas, máximo 150 caracteres"><title>Título do Documento</title></head> <body> <!-- Aqui fica a página que será visível para todos, onde pode-se inserir textos, imagens, links para outras páginas, etc, geralmente usa-se: –><div>Tag para criar-se uma 'caixa', um bloco, mais utilizada com "Cascading Style Sheets (Folhas de Estilo em Cascata)</div><span>Tag para modificação de uma parte do texto da página</span><img src="endereço_de_uma_imagem.jpg" /> <a href="http://www.wikipedia.org">Wikipedia, A Enciclopédia Livre</a></body></html>

No Editor do Wordpress, modo VISUAL, posicione o cursor no local onde você deseja inserir o código para apresentação. Depois, clique em botão [Adicionar código Crayon].

Plugin Syntax Highlighter para o WordPress - Visual Dicas

No campo Código, digite ou cole o código que você deseja inserir.

Plugin Syntax Highlighter para o WordPress - Visual Dicas

No nosso exemplo vamos copiar e colar o código HTML que mostramos anteriormente…

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Depois de colado ou digitado o código, faça as configurações do seu Sintax Hightlighter, como título, linguagem de programação, temas, fonte, dimensões, etc..

Para mais informações: http://wordpress.org/plugins/crayon-syntax-highlighter/

Feitas as alterações desejadas (você deverá testar todas as configurações possíveis até encontrar a mais adequada para a sua apresentação), clique no botão [Adicionar].

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Veja como ficaram definidas as configurações do nosso exemplo…

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Obs.: O que aparece em amarelo foi alterado em relação aos parâmetros globais.

Após adicionado o código, clique no botão [Atualizar] para publicar o post.

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Pronto, veja como a apresentação do código utilizando o plugin Crayon Syntax

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Usando o plugin – editando um código já publicado

Voltamos ao editor do Wordpress.  Vamos alterar agora aquele primeiro código que inserimos na página de teste.

Clique no código desejado (em qualquer ponto da área delimitada ao redor do código).

Clique no botão [Adicionar código Crayon].

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Mude as configurações e clique no botão [Salvar]. Veja nosso exemplo abaixo:

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Clique no botão [Atualizar] para publicar as modificações do post.

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Veja agora como ficou o código utilizando o plugin….

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Usando o Código com o Syntax Highlighter

Obs.: Para ver a página de teste, clique no link:

 http://visualdicas.com.br/byalf/?p=79

Observe que quando você passa o mouse sobre um código publicado com o Crayon Syntax Highlighter  aparecerá uma Barra de Ferramentas no topo. Este menu é muito importante e funcional que ajudará os seus leitores a utilizarem melhor o código que foi apresentado.

Obs.: Você poderá mudar as configurações da barra de ferramentas na edição de cada código, ou alterando as configurações globais do plugin (padrão).

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Veja as funcionalidades da barra de ferramentas:

1) Alterna quando clicado com nº de linhas ou sem nº das linhas

image

2) Exibir código simples

image

3) Alternar quebras de linha ou sem quebras de linha

image

4) Expande o código na horizontal

image

5) Seleciona e copia o código automaticamente (Para colar, use CTRL+V)

image

6) Abre o código em uma nova janela do navegador

image

Nova janela apenas com o código

image

Alterando as configurações globais do plugin

Para alterar as configurações globais do plugin Crayon, acesse a página administrativa do seu blog no Wordpress.

Selecione [Configurações] e clique em [Crayon].

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Faça as alterações desejadas para o padrão global do plugin.

Plugin Syntax Highlighter para o WordPress - Visual Dicas

Depois de realizar as alterações, no final da página clique no botão [Save Changes].

Plugin Syntax Highlighter para o WordPress - Visual Dicas

byALF 

Leia também:

Prettify Syntax Highlighter no Blogger

0 comentários:

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More