• Tutoriais

    • Como Usar SyntaxHighlighter

    outubro 19, 2014 Roberta
    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 == &quot;item&quot;'>
<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: &quot;Consolas&quot;, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, 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 == &quot;item&quot;'> 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



    Talvez vc goste:

    Postar um comentário

    4 Comentários

    1. Vicky19 outubro

      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)!!

      beijos

      ResponderExcluir
    2. @hannah_g3 (Dona do A.N)23 outubro

      ó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

      Bjoon - Adolescente Nerd // Oficial

      ResponderExcluir
    3. rieko26 dezembro

      This is a great tutorial, but it doesn't work on my blog. It doesn't show anything...

      ResponderExcluir
      Respostas
      1. Roberta13 janeiro

        Hi ♥ This is because the Dropbox links aren't longer showing up in blogger. I'll upload it to Github as soon as I can.

        Excluir

    Muito 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

    © Copyright , Reino Kawaii. All rights Reserved. | ThemeDaddy Best Blogger Themes

    up