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!