Imagem: Robert S. Donovan/Via: IM Creator
Olá! Para quem gosta de postar tutoriais em seu blog, já deve conhecer o SyntaxHighlighter. Mas o que é isso? É essa caixinha para destacar códigos que uso aqui no blog; esse que uso, com função copiar que abre uma janelinha e você copia tudo de uma vez clicando Ctrl+A, foi criado pela Giza Veiga na época do Candylland; não sei como se adiciona essa função, mas vou mostrar como estruturar o código que é de autoria de Alex Gorbatchev. O resultado do nosso vai ser esse:
Para isso, entre em seu Modelo - Editar HTML, procure por </body> e antes dele cole isso:
<!-- SyntaxHighlighter -->
<b:if cond='data:blog.pageType == "item"'>
<style>
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
background: none !important;
border: 0 !important;
bottom: auto !important;
float: none !important;
height: auto !important;
left: auto !important;
line-height: 1.1em !important;
margin: 0 !important;
outline: 0 !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
right: auto !important;
text-align: left !important;
top: auto !important;
vertical-align: baseline !important;
width: auto !important;
box-sizing: content-box !important;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 1em !important;
min-height: inherit !important;
min-height: auto !important;
}
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
}
.syntaxhighlighter.source {
overflow: hidden !important;
}
.syntaxhighlighter .bold {
font-weight: bold !important;
}
.syntaxhighlighter .italic {
font-style: italic !important;
}
.syntaxhighlighter .line {
white-space: pre !important;
}
.syntaxhighlighter table {
width: 100% !important;
}
.syntaxhighlighter table caption {
text-align: left !important;
padding: .5em 0 0.5em 1em !important;
}
.syntaxhighlighter table td.code {
width: 100% !important;
}
.syntaxhighlighter table td.code .container {
position: relative !important;
}
.syntaxhighlighter table td.code .container textarea {
box-sizing: border-box !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
border: none !important;
background: white !important;
padding-left: 1em !important;
overflow: hidden !important;
white-space: pre !important;
}
.syntaxhighlighter table td.gutter .line {/*cor da numeracao*/
text-align: right !important;
padding: 0 0.5em 0 1em !important;
color: #C5C4C4 !important;
text-shadow: 1px 1px #F5F4F4 !important;
}
.syntaxhighlighter table td.code .line {
padding: 0 1em !important;
}
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
padding-left: 0em !important;
}
.syntaxhighlighter.show {
display: block !important;
}
.syntaxhighlighter.collapsed table {
display: none !important;
}
.syntaxhighlighter.collapsed .toolbar {
padding: 0.1em 0.8em 0em 0.8em !important;
font-size: 1em !important;
position: static !important;
width: auto !important;
height: auto !important;
}
.syntaxhighlighter.collapsed .toolbar span {
display: inline !important;
margin-right: 1em !important;
}
.syntaxhighlighter.collapsed .toolbar span a {
padding: 0 !important;
display: none !important;
}
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
display: inline !important;
}
.syntaxhighlighter .toolbar {
position: absolute !important;
right: 1px !important;
top: 1px !important;
width: 11px !important;
height: 11px !important;
font-size: 10px !important;
z-index: 10 !important;
}
.syntaxhighlighter .toolbar span.title {
display: inline !important;
}
.syntaxhighlighter .toolbar a {
display: block !important;
text-align: center !important;
text-decoration: none !important;
padding-top: 1px !important;
}
.syntaxhighlighter .toolbar a.expandSource {
display: none !important;
}
.syntaxhighlighter.ie {
font-size: .9em !important;
padding: 1px 0 1px 0 !important;
}
.syntaxhighlighter.ie .toolbar {
line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {
padding-top: 0px !important;
}
.syntaxhighlighter {
background-color: white !important;
}
.syntaxhighlighter .line.alt1 {/*cor da linha*/
background-color: #FCF2FB !important;
}
.syntaxhighlighter .line.alt2 {/*cor da linha*/
background-color: #FDF7FD !important;
}
.syntaxhighlighter .gutter .line {/*borda ao lado dos numeros*/
border-right: 1px solid #fff !important;
}
.syntaxhighlighter .toolbar {
display: none;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {/*cor do texto*/
color: #C5C4C4 !important;
text-shadow: 1px 1px #F5F4F4 !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {/*cor das explicacoes*/
color: #fcc !important;
text-shadow: 1px 1px 1px #fff !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {/*cor das classes e links*/
color: #fcc !important;
}
.syntaxhighlighter .keyword {/*nomes dos css*/
color: #D9ABFF !important;
}
.syntaxhighlighter .preprocessor {
color: gray !important;
}
.syntaxhighlighter .variable {
color: #aa7700 !important;
}
.syntaxhighlighter .value {/*cor dos numeros e textos no codigo*/
color: #E5ADDC !important;
}
.syntaxhighlighter .functions {
color: #ff1493 !important;
}
.syntaxhighlighter .constants {
color: #0066cc !important;
}
.syntaxhighlighter .script {
font-weight: bold !important;
color: #006699 !important;
background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {/*cor do texto*/
color: #D9ABFF !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
color: #ff1493 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
color: red !important;
}
.syntaxhighlighter .keyword {
font-weight: bold !important;
}
</style>
<script src='https://db.tt/0cqYlF3m' type='text/javascript'/>
<script src='https://db.tt/UemysHyz' type='text/javascript'/>
<script src='https://db.tt/7A7Ogl7X' type='text/javascript'/>
<script type='text/javascript'>SyntaxHighlighter.config.bloggerMode = true;;SyntaxHighlighter.all();</script>
</b:if>
<!-- SyntaxHighlighter -->
Salve. Para usar, adicione em suas postagens isso aqui:
<pre class='brush:css'> para postar um código com css </pre> <pre class='brush:xml'> para postar um código com html </pre>
Quando for postar algum código em HTML, converta-o para a linguagem Html antes de colar entre o <pre> e </pre>; existem sites que fazem isso, como o Parse HTML for Blogger, só colar o código na área em branco do site e clicar no botão Parse que ele te dá o código todo em HTML. Já tá tudo ok!
Mas para quem quer conhecer melhor e baixar o SyntaxHighlighter, poderá fazer download do código completo aqui: Download.
Nesse download você irá obter os scripts e css necessários para estruturá-lo; dentro da pasta scripts estão esses 3 scripts do final do código, que são shCore, shBrushCss e shBrushXml. Hospede-os em sites como Dropbox, por exemplo.
Depois você deve configurar para Blogger, como é mostrado na página de configuração do site do autor, e no código, é o último script.
Por último, dê uma aparência ao seu syntaxhighlighter, adicionando um css entre <style> e </style>. Para ver os temas que o autor disponibiliza, visite essa página: Themes. Se você fez download, veja na pasta Styles as opções que você pode editar no Notepad++. No código deixei mostrando onde editei, no caso só cores mesmo, do arquivo shCoreDefault.
E para que apareça apenas "dentro" do post, sem ser na página inicial, coloque tudo entre <b:if cond='data:blog.pageType == "item"'> e </b:if>.
Espero que tenha ficado explicadinho; por achá-lo complicado, eu procurei entender o código por meio do da Giza, que disse no início, e tentei passar conforme o que entendi. Há uma outra maneira de se fazer isso, como já postei aqui, mas prefiro esse desse post de hoje. Espero que gostem :3
4 Comments
Ameei o tutorial!! Claro que apenas sei o básico do HTML, mas sempre quis saber como fazer isso (porém nunca lembro de procurar)!!
ResponderExcluirbeijos
ótimo tutorial, sempre fui fã desses blockquotes, é possível deixá-los bem kawaii como você faz aqui. Haha' o código dele é grande pakas né? hahahaa' ain gente, amo demais suas postagens
ResponderExcluirBjoon - Adolescente Nerd // Oficial
This is a great tutorial, but it doesn't work on my blog. It doesn't show anything...
ResponderExcluirHi ♥ This is because the Dropbox links aren't longer showing up in blogger. I'll upload it to Github as soon as I can.
ExcluirMuito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.
Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.
Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.
Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart