Compartiendo el conocimiento
RSS icon Email icon Bullet (black)
  • Taller. Agregar Código Fuente en tú Blog

    Posted on enero 28th, 2009 admin 1 comment

    Amigos suscriptores,

    Seguramente ustedes tienen pensado crear su propio blog de programación/tecnología en general, en un futuro no muy lejano, o quizás, ya tienen uno, y se encuentran barrados ante la necesidad de agregar código fuente de algún lenguaje sin saber como hacerlo.

    En este nuevo taller explicaremos diversas formas de realizar esta tarea.

    • Sin necesidad de instalar ningún plugin.
    • Instalando un plugin específico.

    El origen del problema, es que a la hora de mostrar código fuente en WordPress, este interpreta los carácteres que utiliza HTML para definir las etiquetas "<" y ">", como etiquetas própias de WordPress.

    Para quien no le guste instalar plugins

    Una solución, sería convertir dichos símbolos por sus Entidades en HTML, es decir, el símbolo "<" lo deberíamos cambiar por "&lt;" y el símbolo ">" por "&gt;"

    Claro que és una árdua tarea realizar estos cambios en todo el código que deseamos poner en nuestro blog. No os preocupeis, para este caso hemos creado una utilidad que nos permitirá convertir a Entidades HTML

    entidadhtml

    En la primera área de texto deberemos escribir/pegar el código que queremos pasar a Entidad HTML, pulsaremos el botón Convertir y obtendremos el código pre-formateado a entidad HTML.

    Ahora ya está listo para que lo podamos pegar en nuestro blog. Si copiamos este ejemplo entre un par de etiquetas <div>,

    <div id="ejemplo" style="border: 1px solid #000000; padding: 5px; background-color: #fff9e5;">...codigo convertido a entidad html...</div>

    podremos obtener el siguiente cuadro con código fuente en nuestro blog.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAbahj3_n5aXq9RN3HFWi7v;
    type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
    if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    }
    }

    //]]>
    </script>
    </head>

    <body onload="load()" onunload="GUnload()">
    <div id="map" style="width:500px;height:300px"></div>
    </body>
    </html>

    Instalando un plugin con funciones de coloreado de texto

    Consultando diversas fuentes, encontré IG Syntax Hiliter, un pluggin para WordPress, el cual soporta un gran número de lenguajes de programación:

    • ActionScript, ASP, C, C++, C#, CSS, DELPHI, HTML, JAVA, JavaScript, MySQL, PERL, PHP, PYTHON, RUBY, SMARTY, SQL, Visual Basic, VB.NET, XML

    Este plugin, nos muestra también dentro de una caja de texto el código fuente que deseemos, coloreando como si de un IDE (Entorno de Desarrollo Integrado) se tratase toda la sintaxis.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Hola Mundo. WebLogica</title>
      </head>
      <body>
        <p>Hola Muno</p>
      </body>
    </html>

    Podemos bajar IG Syntax Hiliter 3.5 desde la propia página del autor. Para instalarlo deberemos descomprimir el archivo bajado y subir la carpeta a nuestro CMS (Content Management System) dentro de la carpeta wp-content/plugins

    Una vez copiado, deberemos activarlo, y en Opciones de nuestro panel de control de WordPress podremos realizar una serie de configuraciones.

    Configuración HiLite

    ¿Cómo se utiliza?

    Su funcionamiento es sencillo, todo el código fuente que vaya entre un par de etiquetas predefinidas, será mostrado como el ejemplo que he puesto, pero ¿Cuales son estas etiquetas?.

    Nosotros podemos definir una serie de nuevos botones para que nos aparezcan a la hora de crear/editar nuevos contenidos de nuestro blog. Para ello deberemos modificar el fichero quicktags.js que se encuentra en la siguiente ruta /wp-includes/js (a partr de la versión 2.x de WordPress, Versiones anteriores se encuentra en /wp-admin/).

    En este fichero definiremos los nuevos botones que haran que se inserte automaticamente el par de tags que encerrarán el código fuente. Insertaremos el siguiente código detrás del último botón creado en dicho fichero.

    //----- Start iG:Syntax Hiliter Plugin's Quick Tags -----

    edButtons[edButtons.length] =
    new edButton('ed_shCSHARP'
    ,'C#'
    ,'[ csharp ]'
    ,'[ /csharp ]'
    ,''
    );
    edButtons[edButtons.length] =
    new edButton('ed_shCSS'
    ,'CSS'
    ,'[ css ]'
    ,'[ /css ]'
    ,''
    );

    edButtons[edButtons.length] =
    new edButton('ed_shHTML'
    ,'HTML'
    ,'[ html ]'
    ,'[ /html ]'
    ,''
    );

    edButtons[edButtons.length] =
    new edButton('ed_shJAVA'
    ,'JAVA'
    ,'[ java ]'
    ,'[ /java ]'
    ,''
    );

    edButtons[edButtons.length] =
    new edButton('ed_shJS'
    ,'JavaScript'
    ,'[ js ]'
    ,'[ /js ]'
    ,''
    );

    edButtons[edButtons.length] =
    new edButton('ed_shPHP'
    ,'PHP'
    ,'[ php ]'
    ,'[ /php ]'
    ,''
    );

    Una vez modificado el fichero quicktags.js, si actualizamos nuestro panel de control de WordPress, veremos que al editar o crear nuevos contenidos, en la vista HTML disponemos de una serie de nuevos botones para insertar nuestro código fuente. Vease la imagen siguiente:

    botonera

    Ahora ya lo teneis todo listo para poder utilizar código fuente en vuestros post.

    Saludos.

 

Una respuesta to “Taller. Agregar Código Fuente en tú Blog”

  1. Usted tiene ciertamente algunas de las opiniones y puntos de vista agradables. http://www.weblogica.es ofrece una nueva mirada a la materia.