Mostrar un Bloque de Código en WordPress

WordPress no permite utilizar código potencialmente peligroso en un blog, hay una manera de publicar el código fuente para su visualización al publico. Se ha implementado un código corto que puede envolver alrededor de su código fuente publicado, que conserva su formato e incluso proporciona resaltado de sintaxis para ciertos idiomas, como en el siguiente ejemplo:

#button{
font-weight:bold;
border:2px solid #fff ;
}
WordPress.com y WordPress.org permite el siguiente código HTML en sus mensajes, páginas y widgets:

address, a, abbr, acronym, area, article, aside, b, big, blockquote, br, caption, cite, class, code, col, del, details, dd, div, dl, dt, em, figure, figcaption, footer, font, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, img, ins, kbd, li, map, ol, p, pre, q, s, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var

Da una mirada al sitio W3 Schools para obtener más información acerca de lo que cada uno de estos códigos HTML se utiliza.

Si está familiarizado con el lenguaje HTML, se dará cuenta de que los códigos como embed, frame, iframe form, input, object, textarea y otros no están en la lista anterior. Esos códigos no están permitidos en WordPress.com por razones de seguridad.

 

La publicación de Código Fuente


Para lograr un resaltado del código, simplemente envolvemos el código en estas etiquetas

[ code ]
Tu código va Aquí
[ /code ]

El parámetro code es el idioma (o language) que planeamos utilizar y que controla la forma en que el código y la sintaxis es resaltado.

Lo siguiente solo aplica para WordPress.com, para WordPress.org ver el final de este articulo.

Los siguientes son los idiomas disponibles:

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • diff
  • erlang
  • fsharp
  • go
  • groovy
  • html
  • java
  • javafx
  • javascript
  • latex (tambien puede procesar LaTeX)
  • matlab (keywords only)
  • objc
  • perl
  • php
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • text
  • vb
  • xml

Si el parámetro de idioma no está establecido, se toma por defecto “texto” (sin resaltado de sintaxis).

El Código entre las etiquetas de code y /code será automáticamente codificado para su visualización, usted no necesita preocuparse por las entidades HTML o nada de formateo.

Configuración de Parámetros


Los códigos muestras, también aceptan una variedad de parámetros de configuración que pueden ser utilizados para personalizar la salida. Todos son completamente opcionales.

  • autolinks (true/false) — Hace que todas las URL se puedan hacer clic en su código de publicación. Por defecto es true.
  • collapse (true/false) — Si es true, el cuadro de código se Despliega hacia abajo cuando se carga la página, lo que requiere que el visitante haga clic para expandirla. Bueno para grandes porciones de código. El valor predeterminado es false.
  • firstline (number) — Utilice esta opción para cambiar el número de numeración de líneas con que comienza. El valor predeterminado es 1.
  • gutter (true/false) — Si es false, la numeración de líneas en el lado izquierdo se ocultará. Por defecto es true.
  • highlight (comma-seperated list of numbers) — Se pueden listar los números de línea que desea ser destacado. Por ejemplo “4, 7, 19”.
  • htmlscript (true/false) — Si es true, se resaltará todo el código HTML / XML en el código. Esto es útil cuando se está mezclando código en HTML, como PHP dentro de HTML. Por defecto es false y sólo funcionan con ciertos lenguajes de código.
  • light (true/false) —  Si es true, el canalón (numeración de líneas) y el margen (véase más adelante) estará oculto. Esto es útil cuando la publicación es de sólo una o dos líneas de código. El valor predeterminado es false.
  • padlinenumbers (true/false/integer) — Permite controlar el relleno de número de línea. true resultará en el relleno automático, false dará lugar a ningún relleno, y la introducción de un número obligará a una cantidad específica de relleno.
  • title (string) — Establecer una etiqueta para su bloque de código. Puede ser útil cuando se combina con el parámetro collapse.

He aquí algunos ejemplos de los parámetros anteriores en acción:

This line is not highlighted.
This line is highlighted.
This line is highlighted.
This line is not highlighted
<strong>This</strong>is a short snippit of <code>code</code> with padlinenumbers set to 4.

Y aquí hay un bloque de código más grande para ver todo en acción. Se establece en el lenguaje PHP con “secuencia de comando HTML” activa y el número de línea 11 destacada.

<!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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
    <title>WordPress.com Code Example</title>
</head>
<body>
    <h1>WordPress.com Code Example</h>
    <p><?php echo 'Hello World!'; ?></p>
    This line is highlighted.
    This line is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long.
    <div class="foobar">
       This is an
       example of smart
       tabs.
    </div>
    <p><a href="http://wordpress.com/">WordPress.com</a></p>
</body>
</html>

Si eres un usuario de WordPress.org y desea utilizar esta característica en su blog, esto NO esta disponible en forma publica, se requiere la descarga de un plug-in (este es el que te recomiendo, desarrollado por el mismo autor de esta característica en WordPress.com)

 


links & referencias: 

si deseas mas información o consultar las fuentes bibliográficas, aquí te dejamos…

 

One thought on “Mostrar un Bloque de Código en WordPress

  1. Hello my family member! I want to say that this post is awesome, nice written and include approximately all significant infos. I¡¦d like to peer more posts like this .

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *