All for Joomla All for Webmasters

Personalizando CSS do SyntaxHighlighter

O plugin SyntaxHighlighter Evolved é um plugin em que você mostra os códigos HTML, CSS, PHP entre outros sem que eles sejam executados. É só ver em qualquer um dos meus tutoriais que eles aparecem constantemente, e esse plugin é realmente muito útil. Veja abaixo como ele é:

/* Testando */

Acontece que os CSS’s que vem com ele são deploráveis e nem sempre combinam com o design do seu blog, né? Aí fica aquela coisa horrível e contrastando com um design tão lindo. Mas finalmente é hora de resolver isso.

Lembrando que você deve ter no seu WordPress instalado o plugin SyntaxHighlighter Evolved.

1. Primeiro, entre no FTP do seu blog (se não sabe como funciona FTP, clique aqui, porque dá uma base de como é) e entre na pasta onde está instalado seu WordPress, como por exemplo no meu caso que é a pasta blog.

2. Depois, entre na pasta wp-content, depois em plugins, depois na pasta syntaxhighlighter, depois em syntaxhighlighter-2 e por último em styles. Ufa!

3. Você vai achar vários arquivos escrito shTheme…, escolha o shThemeEmacs.css e como botão direito clique sobre o arquivo e depois em Ver/Editar (estou usando o Filezilla).

4. O arquivo para edição abriu. Agora, entenda como editar:

.syntaxhighlighter
{
	background-color: #ffb8c4 !important;
	-moz-box-shadow: 0 0 5px #ff7495;
	-webkit-box-shadow: 0 0 5px #ff7495;
	box-shadow: 0 0 5px #ff7495;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

O .syntaxhighlighter é para editar a caixa num todo. Você pode colocar borda arredondada, fundo com imagem, borda com imagem, sombra, etc.

/* First line */
.syntaxhighlighter .line.alt1
{
	background-color: #ff95b1;
	color: #8e4300;
}
/* Second line */
.syntaxhighlighter .line.alt2
{
	background-color: #ff95b1;
	color: #8e4300;
}

Com este CSS você edita as linhas do código e suas cores caso queira que a caixa fique com o mesmo efeito da caixa do MadlyLuv, toda listradinha assim:

.syntaxhighlighter .plain,
.syntaxhighlighter .plain a
{
	color: #ff3d62 !important;
	font-weight: bold;
}
.syntaxhighlighter .comments,
.syntaxhighlighter .comments a
{
	color: #623500 !important;
}
.syntaxhighlighter .string,
.syntaxhighlighter .string a
{
	color: #A31515 !important;
}
.syntaxhighlighter .keyword
{
	color: #623500 !important;
	font-weight: bold;
}
.syntaxhighlighter .preprocessor 
{
	color: #623500 !important;
}
.syntaxhighlighter .variable 
{
	color: #623500 !important;
}
.syntaxhighlighter .value
{
	color: #ff3d62 !important;
}
.syntaxhighlighter .functions
{
	color: #7d3500 !important;
}
.syntaxhighlighter .constants
{
	color: #7d3500 !important;
}

Esses são os CSS’s para editar essas palavras coloridas que aparecem no meio do código, como você viu na caixa do MadlyLuv e na minha também. Edite da forma como quiser e se quiser deixar algo em negrito adicione a linha font-weight: bold; no CSS daquilo que você quer mudar para negrito (como eu usei ali no plain).

.syntaxhighlighter .toolbar
{
	background-color: #ffcbda !important;
	color: #7d3500 !important;
	border: 1px dashed #7d3500 !important;
}
.syntaxhighlighter .toolbar a
{
	color: #ff95b1 !important;
}
.syntaxhighlighter .toolbar a:hover
{
	color: #7d3500 !important;
}

Esse CSS edita essa barrinha que aparece quando a gente passa o mouse:

Esse !important na frente do código é importante para que o CSS daquela linha faça efeito.

.syntaxhighlighter .line .number
{
	color: #623500 !important;
}

Esse é para colorir os números que aparecem ali do ladinho do código.

5. Depois de todas essas edições, salve e no Filezilla vai aparecer a janela abaixo. Clique em Sim!

6. Agora, no seu painel WordPress, vá em Configurações/Settings e clique em SyntaxHighlighter.

7. Na página de configuração do plugin, em Color Theme, selecione o tema Emacs e clique depois em Save Changes.

8. Prontinho!

Não necessariamente você precisa editar o tema Emacs, você pode escolher qualquer outro tema para o SyntaxHighlighter disponível na pasta de styles para o plugin.

Dúvidas? Ask-me!