Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

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(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/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>
- - 5 Comentarios
Tag

Comentarios (5)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar