Blog de Maki

Un blog de conocimiento libre.

24 ago 2013

Publicar código de programación en Blogger

Seguro que todos los usuarios que ponen su código de algún lenguaje de programación en Blogger quieren que se vea de una forma llamativa, con formato, resaltado en colores y demás. Pues la mala noticia es que en Blogger no se puede hacer esto por defecto, pero podemos arreglarlo con SyntaxHighlighter.

SyntaxHighlighter es un resaltador de código desarrollado en JavaScipt y es código líbre. Como en Blogger no se pueden subir archivos usaremos su versión online.

En primer lugar accedemos a la sección Plantilla y pinchamos en Editar HTML:


Ahora tenemos que insertar el siguiente código dentro de la etiqueta <head>.Los script que añado son  para poder insertar un determinado lenguaje de programación, es decir, cada script que hay sirve para poder insertar código de un lenguaje determinado. Más adelante os diré como usarlo correctamente:
<!--SYNTAX HIGHLIGHTER INICIO-->
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"/>
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.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/shBrushJavaFX.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>
<!--SYNTAX HIGHLIGHTER FIN--> 

Le damos a Guardar plantilla y ya podemos hacer nuestra primera prueba. Vamos a insertar el típico "Hello World" de Java. Para ello tenemos que irnos a la pestaña HTML cuando creamos nuestra nueva entrada y encerrar todo el código en una etiqueta <pre>. Quedaría de la siguiente forma:
<pre class="brush: java">
public class HelloWorld 
{
    public static void main(String[] args) 
    {
        System.out.println("Hello World");
    }
}
</pre>

En esta entrada he usado únicamente código en HTML pero esta herramienta se puede utilizar para muchos más lenguajes de programación. En la siguiente lista están todos los lenguajes soportados:
LenguajeCon que nombres se deben utilizar Que archivo se debe incorporar
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js

Por ejemplo si queremos publicar código Java según la columna 3 de la tabla debemos de añadir, dentro de la etiqueta <head> mencionada anteriormente, la siguiente línea de script:
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script>

Nota. Si queremos publicar código xml, xhtml, xslt, html y xhtml debemos considerar que dentro de las etiquetas <pre> no debemos utilizar los caracteres <  > en vez de ello utilizaremos &lt; y &gt; respectivamente, todo esto para no confundir al código html.

9 comentarios:


  1. codigo para determinar si un numero es mayor es menor y el del medio

    package k;
    import java.util.Scanner;

    public class MayorOmenor {

    public static void main(String[] args) {

    Scanner entrada = new Scanner(System.in);

    int a,b,c;
    int mayor;
    int menor;
    int medio;


    System.out.print("Ingrese el primer valor:");
    a= entrada.nextInt();

    System.out.print("Ingrese el segundo valor:");
    b= entrada.nextInt();

    System.out.print("Ingrese el tercer valor:");
    c= entrada.nextInt();




    if (a>b&&a>c){
    System.out.printf("%d\t Es el mayor",a );

    }else if (b>a&&b>c){
    System.out.printf("%d\t Es el mayor", b);

    } else if(c>a&&c>b){
    System.out.printf("%d\t Es el mayor\n",c);
    }

    // bloque que determina el número menor

    if (ac){
    System.out.printf( "%d\tEs el del medio",a );

    }else if (a>b&&ac){
    System.out.printf( "%d\tEs el del medio\n", b);

    }else if (b>a&&bb){
    System.out.printf( "%d\tEs el del medio\n",c);

    } else if(c>a&&c<b){
    System.out.printf( "%d\tEs el del medio\n",c);
    }


    }//fin del metodo main

    }// fin de la clase CincoEnteros

    ResponderEliminar
  2. muchas gracias, pero podría agregarse el lenguaje de r?

    ResponderEliminar
  3. Excelente muchas gracias. funciono bien!

    ResponderEliminar
  4. Hola amigo, gracias por compartir tu conocimiento, pero me podrias ayudar un poco más de donde debo copiar cada cosa, y ya que lo tengo hecho como llamo la función para que aparezca un código fuente así como en tu blog. Saludos

    ResponderEliminar
  5. no me ha funcionado, y he seguido los pasos uno a uno..

    ResponderEliminar
  6. The Ultimate Guide to Casino Games & Bonus Codes
    Most of the 1xbet 우회 주소 casinos with the best bonus codes include exclusive offers, promotions, and best 토토 사이트 중계 casino games. winwinbet We 스포츠 벳 provide an extensive list bet365 실시간 배당 흐름 of the

    ResponderEliminar