sexta-feira, 27 de maio de 2016

SyntaxHighlighter #3 - Identidade visual


E ai pessoal, esse é o terceiro post sobre SyntaxHighlighter (SHL), e nesse post vamos aprender a alterar a cor da nossa ferramenta, vamos personalizar a identidade visual.

SyntaxHighlighter #3 - Identidade visual

Bom é muito simples! No post anterior eu expliquei cada um dos arquivos necessários para o SHL funcionar corretamente, e um desses arquivos era referente a cor da nossa ferramenta, que por default e no exemplo anterior usamos esse arquivo css aqui: shThemeDefault.css


<!-- configuracao do tema, css usado, default, branco, inicio -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Para o blog DevIsComing eu achei que essa identidade era a adequada e a que mais combinava com o restante do site, mas nos temos vários opções:

NomeArquivo
DefaultshThemeDefault.css
DjangoshThemeDjango.css
EclipseshThemeEclipse.css
EmacsshThemeEmacs.css
Fade To GreyshThemeFadeToGrey.css
MidnightshThemeMidnight.css
RDarkshThemeRDark.css

Clicando em um dos itens na coluna "Nome" será possível ver o resultado da sua ferramenta quando aplicado o css localizado na coluna "Arquivo".

E para facilitar, caso tenha optado por hospedar o SHL no seu servidor, clicando em um dos itens da coluna "Arquivo", você será redirecionado para a CDN onde estão localizados os arquivos .css, dessa forma basta clicar com botão direito na página, selecionar "Salvar como" e com um cliente FTP enviar o arquivo .css para o seu servidor e realizar as alterações no seu fonte. 

<!-- configuracao do tema, css usado, midnight, azul escuro, inicio -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>

A vantagem de ter nesse momento os arquivos no seu servidor e não estar usando a CDN do SHL, é que caso deseje alterar alguma coisa, basta editar o arquivo css e será possível customizar ainda a identidade da sua ferramenta.

Sobre a identidade visual é isso!
No próximo post eu vou estar explicando sobre o atributo class, os parâmetros que podemos estar passando para nossa ferramenta e algumas configurações no script de inicialização do SHL.

Até a próxima!

Nenhum comentário:

Postar um comentário