viernes, junio 19, 2015

Poner código en blogger

Siempre me había preguntado como poner código en blogger, una utilidad muy interesante a la hora de explicar programas y facilitar que los lectores puedan copiar el código a la hora de practicar alguna cosilla.

Después de haber estado buscando un poco he encontrado la mejor forma de hacerlo. Debes de dirigirte a la sección de configuración de tu blog blogger.

1 Ves a plantilla

2 Haz click en código HTML

3 Dirígete a


4 Dentro de debes insertar este código
<!--PRINCIPIO DE CÓDIGO SYNTAX HIGHLIGHTER-->
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <script language='javascript'>
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.config.clipboardSwf = "http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf";
      SyntaxHighlighter.all();
    </script>
    <!--FIN DE CÓDIGO SYNTAX HIGHLIGHTER-->


Cada una de estas líneas que hemos añadido son de un tipo de lenguaje, he añadido los que es más posible que utilice pero si quieres añadir algún otro aquí tienes los soportados.
Brush
name
Brush aliases File name
ActionScript3
as3, actionscript3
shBrushAS3.js
Bash/shell
bash, shell
shBrushBash.js
ColdFusion
cf, coldfusion
shBrushColdFusion.js
C#
c-sharp, csharp
shBrushCSharp.js
C++
cpp, c
shBrushCpp.js
CSS
css
shBrushCss.js
Delphi
delphi, pas, pascal
shBrushDelphi.js
Diff
diff, patch
shBrushDiff.js
Erlang
erl, erlang
shBrushErlang.js
Groovy
groovy
shBrushGroovy.js
JavaScript
js, jscript, javascript
shBrushJScript.js
Java
java
shBrushJava.js
JavaFX
jfx, javafx
shBrushJavaFX.js
Perl
perl, pl
shBrushPerl.js
PHP
php
shBrushPhp.js
Plain
Text
plain, text
shBrushPlain.js
PowerShell
ps, powershell
shBrushPowerShell.js
Python
py, python
shBrushPython.js
Ruby
rails, ror, ruby
shBrushRuby.js
Scala
scala
shBrushScala.js
SQL
sql
shBrushSql.js
Visual
Basic
vb, vbnet
shBrushVb.js
XML
xml, xhtml, xslt, html, xhtml
shBrushXml.js

Así que si queremos tener Ruby deberemos añadir esta línea
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>

Ahora la pregunta que viene ¿Que debo poner para que en mis posts se vea el código?

Pues es muy simple, cuando quieras añadir código tan solo has de encerrarlo en este código
	<pre class="brush: html">
		
		

	</pre>

Tan sólo deberás cambiar el lenguaje y eso se hace cambiando "brush: html" cambias html por el lenguaje que quieras.

OJO -> Hay que tener en cuanta que si queremos publicar código como xml, xhtml, xslt, html y xhtml debemos cambiar < por < y > por >

Todo esto también puedes encontrarlo aquí: http://alexgorbatchev.com/SyntaxHighlighter/

No hay comentarios: