Ahora es realmente fácil destacar tú código fuente en tus entradas de WordPress para mostrar el código de forma más bonita y visual. SyntaxHighlighter Evolved es un plugin que te lo facilita sin perder información y formateando con colores. Haciendo uso del JavaScript SyntaxHighlighter del paquete de Alex Gorbatchev.
Puedes ver una demostración en la página del plugin y el mismo está disponible para múltiples lenguajes, puedes ver como lo usan en WordPress.com para más documentación.
Instalando o actualizando el plugin SyntaxHighlighter Evolved
Para instalar el plugin solo tienes que descargar el ZIP, descomprimirlo y subirlo a /wp-content/plugins/. Y si lo que quieres es actualizar desactiva primero el plugin, borra el contenido y vuelve a subir la nueva versión. Una vez instalado o actualizado solo tienes que activarlo.
Como usar el plugin SyntaxHighlighter Evolved
Solo tienes que colocar el código fuente a destacar entre corchetes [lenguaje]. Por ejemplo para PHP con [ codesyntax lang=»php» ]código aquí[ /codesyntax ] o [ codesyntax lang=»css» ]código aquí[ /codesyntax ]. La lista de lenguajes soportada es realmente amplia.
Un ejemplo real de código fuente PHP formateado, del fichero de la administración de WordPress. Recuerda que en el editor avanzado de tu WordPress tiene un botón que te ayuda a insertar el código de forma sencilla.
abr4xas says:
Hola, como uso el plugin?
No explicas como hacerlo :S
David Carrero Fernández-Baillo says:
Hola, en el editor visual de entradas se te añade un botón adicional para usarlo 😉 es muy sencillo, se abre una ventana, eliges el lenguaje y pegas tu código, y listo 🙂
Rubén says:
Buenas David!
Descargué e instalé el plugin para mi blog, pero no consigo que se vea bien…
Pego el código en el botón del lápiz que aparece al crear nuevos temas, previamente seleccionando el lenguaje de programación, pero una vez publico la noticia, este código aparece en relieve y descentrado.
Aquí va el ejemplo: blog.bcreationet.com/?p=124
Muchas graciaaaas!!!
David Carrero Fernández-Baillo says:
Rubén es un tema de estilos, tendrás que revisarlos en el diseño (CSS).