Mostrar código en WordPress

Mostrar código en WordPress

Hay veces en los cuales deseas mostrar código en tus artículos sin que se ejecute, para esto hay una herramienta que hasta ahora no conocía que WordPress nos proporciona la cual se llama SyntaxHighlighter, ademas de solo mostrar código, resalta las etiquetas con colores y hace posible de que el lector pueda copiar el código.

A continuación voy a mostrarte como funciona, podrás pasar de mostrar código en imágenes a mostrar código de una forma mas agradable para ti y para tus lectores:

la manera común de mostrar código es así (en imágenes):

Código en WordPress.com

Pero con SyntaxHighlighter es así:


<html>

<head></head>

<body>
Esto es lenguaje XML

</body>

</html>

Para hacer lo que viste que hice anteriormente debes hacer lo siguiente:

1- Escribir el código que deseas mostrar:

Primero que todo debes escribir normalmente el código que deseas mostrar, para que te quede mas fácil hazlo en el editor visual, ejemplo:

códigos en WordPress

2 – Agregar el código sourcecode:

Lo siguiente es agregar arriba del código escrito, el código sourcecode, debes especificar el tipo de código que escribiste, para hacer esto debes agregarle al código, “languaje” y especificar el tipo de código que deseas mostrar, ejemplo: ” sourcecode languaje=’css’ “, para finalizar debes cerrar el código colocandolo debajo de donde escribiste el tuyo, todo esto quedaría de la siguiente manera:

sourcecode

Resultado:

Finalmente podrás ver el resultado de que podrás observar el código sin que se ejecute:

 body{
 float: left;
 clear: both;
 }
 table{
 margin: auto;
 border: 0px;
 }
Debes tener en cuenta de que este método solo sirve para WordPress.com. esta herramienta tiene ciertos atributos de modificación, si quieres saber cuales son puedes visitar el siguiente link: Postear código en WordPress – Aprendiendo Programación
Anuncios

Un comentario

  1. Uffff, recien cree mi primer blog explicando algunas cositas de java y ya me estaba estresando por no saber como hacer que mi codigo se visualizara bien. GRACIAS!!! 😀

Comenta desde tu perspectiva :)

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: