Insertar código fuente en WordPress usando Prism

[ 7 julio 2016 ] [ Actualizado: 20 julio 2016 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

librería

¿Cansado de insertar código que luce aburrido?, en el siguiente artículo veremos cómo insertar código fuente en WordPress, tanto en las entradas como en los comentarios, usando la librería Prism integrada con un plugin.

1- Instalando el plugin a usar

El plugin que usaremos es Prism Syntax Highlighter for WordPress, lo que hace básicamente este plugin es cargar dos archivos: prism.css y prism.js, en la parte frontal del sitio.

2- Personalizando el código a cargar

Desde el sitio web de Prism, al usar el botón de descarga, podemos personalizar lo siguiente:

• Descargar archivos Minificados, esta es la opción recomendada.
• Themes, a través de esta opción podemos elegir cómo queremos que luzca nuestro código.
• Lenguajes, Debemos elegir sólo los lenguajes de programación que queremos usar, html esta considerado como markup.
• Plugins, finalmente podemos elegir si vamos a usar o no plugins, algunos de los más populares son mostrar numeración y destacar una línea de código.

 
Una vez configurada nuestra descarga, en la parte inferior veremos que tenemos disponibles dos botones, uno para la descarga del archivo prism.js y otro para la descarga del archivo prism.css , estos archivos descargados, de acuerdo a la documentación del plugin que estamos usando, deben copiarse a la carpeta : /wp-content/uploads/prism/

3- Probando Prism con nuestro código

Una vez realizado la instalación del plugin y la personalización de los archivos de visualización, podemos entonces usarlo en nuestro sitio Web

– Insertar código con código html

Esta el la opción más común, podemos insertar código con la siguiente sintaxis:

<pre><code class=»language-xxx»></code></pre>

En donde xxx es el lenguaje de programación a mostrar, usamos pre para una mejor visualización, especialmente si son varias líneas de código.

– Insertar código con Shortcode y un campo personalizado

Esta es otra opción que nos brinda el plugin, para insertar código con un shortcode debemos hacer referencia a un campo personalizado previamente creado en nuestra entrada, luego haremos referencia a este campo personalizado con el atributo field, con la siguiente sintaxis.

[ prism field=yyy language=xxx]

En donde yyy es el nombre del campo personalizado que tiene asignado nuestro código y xxx es el lenguaje de programación usado.

– Insertar código con Shortcode y una url

En caso necesitemos mostrar mucho código, es mejor hacerlo a través de un archivo externo, en este caso podemos usar un shortcode con el atributo url, la sintaxis es como sigue :

[prism url=zzz language=xxx]

En dondee xxx es el lenguaje de programación del archivo y zzz es la url del archivo externo a mostrar, tenemos que tener en cuenta que en la url brindada debe figurar directamente el archivo a mostrar, en el caso de un archivo de Github, debemos usar el modo Raw.

4- Código fuente en comentarios

Para tener esta misma funcionalidad en los comentarios, solo debemos asegurarnos que los archivos prism.js y prism.css se encuentren cargados en la entrada. El plugin usado tiene una consistencia de sólo cargar estos archivos si hay código a mostrar en la entrada, si comentamos un artículo que no tiene código en la entrada, este comentario no se formateará con prism.

Para corregir esto modificaremos el archivo del plugin prism.php , específicamente la función : maybe_load_prism , la dejaremos tal como luce en el siguiente código.

En este código vemos que si es una entrada o una página, comprobado con is_single(), siempre cargará los archivos prism.

public function maybe_load_prism()
{

	global $post, $wp_query;

	$post_contents = '';

	if ( is_single() ) 
	{
		wp_enqueue_style( 'prism' );
		wp_enqueue_script( 'prism' );

	} 
	elseif ( defined( 'PRISM_ARCHIVE_SCAN' ) && PRISM_ARCHIVE_SCAN )
	{
		$post_ids = wp_list_pluck( $wp_query->posts, 'ID' );
		foreach ( $post_ids as $post_id ) 
		{
			$post_contents .= get_post_field( 'post_content', $post_id );
		}
	}
	
}

¿Aún con dudas?, para aclarar los puntos tratados anteriormente te sugiero revisar el siguiente video:

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando…