Tutoriales Sobre Blogger: SyntaxHighlighter para blogger con Titulo

En este tutorial veremos como agregar a nuestro blog un estilo SyntaxHighlighter para blogger con Titulo.

Syntax es un lenguaje de programación que permite resaltar códigos de forma automática y no tener que hacerlos nosotros manualmente 

Antes de comenzar veremos una demostración: 

Demo

Comencemos: 

• Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol +F) 

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente codigo CSS

pre {padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:13px;color:#839496;font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;line-height:1.4em;position:relative;white-space: pre-wrap;word-wrap: normal;}
pre.line-number {background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRD0mYE_NRdrSr89KYmfCTMm3rGSmXwRWX4h31lvhJRst-py4gxi2XWZJFE7R4WWbnV5YI_Sv-fPK5rTc3KmCMVsTxCEByACU3LdoxjqpeyZ0VfGACZUMWfj2OFvLsXSAQ0UJ5GToXkFE/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none;}
pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute;}
pre[data-codetype="CSS"]{border-left-color:#5fbbba}
pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
pre[data-codetype="JQuery"]{border-left-color:#99c262}
pre.line-number[data-codetype]:before {content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:14px;text-transform:uppercase;background-color:#41749f;color:white}
pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
code {font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color: #d14;}
#comments code {color:#bbbb6d;}
pre code {padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block; }
pre .line-number {float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
  pre .javadoc {color: #586e75;font-style: italic;}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {color: #859900;}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {color: #7195a3;}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {color: #569dcf;}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {color: #aa985a;}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {color: #509a55;}
pre .deletion {color: #dc322f;}
pre .tex .formula {background: #073642;
}

• Paso 4: Todavia en la plantilla buscamos la siguiente linea (Ctrol + F) 

</body>

• Paso 5: Justo por encima de </body> pegamos la siguiente linea-  

<script src='https://dl.dropboxusercontent.com/u/91602513/Html/TutorialesBlogger.blogspot.com/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </script>

• Paso 6: Guardamos los cambios realizados en nuestra plantilla

Ahora agregaremos nuestro Syntax en una entrada  

• Paso 7: Dentro de una entrada agregamos las siguiente lineas HTML

Syntax CSS

<pre class="line-number" data-codetype="CSS"><code> ....... </code></pre>

Syntax JQuery

<pre class="line-number" data-codetype="Jquery"><code> ....... </code></pre>

Syntax HTML

<pre class="line-number" data-codetype="HTML"><code> ....... </code></pre>