Cómo mostrar código en WordPress cuando las etiquetas “<code>“ o “<pre>“ se te quedan pequeñas o no son suficiente.
Índice de contenidos del artículo
Cómo mostrar código en WordPress formateado
Para insertar código en mis entradas, hasta ahora utilizaba el código que te muestro a continuación:
/* Insertar código con etiqueta sourcecode */...La solución puede ser utilizar plugins como HTML Editor Syntax Highlighter, iG:Syntax Hiliter y otros similares de los existentes.
Personalmente he elegido Crayon Syntax Highlighter por su sencillez y especialmente por cómo puedo resaltar el código.
Algunas características destacadas de Crayon Syntax Highlighter:
- Editor de temas integrado.
- Editor de etiquetas en ambos editores: Visual y Texto (HTML).
- Conmutador: Solo código.
- Conmutador: Números de línea.
- Función de copiar/pegar código.
- Abrir el código en una nueva ventana (popup).
- Ajuste de líneas.
- Compatible con el editor Visual y de Texto (HTML).
- Detección de dispositivos móviles y tablets.
- Interacción de eventos de ratón (que muestra el código simple con un doble clic, y la la barra de herramientas al pasar el ratón).
- Tamaños de pestañas.
- Se puede poner un título a la caja de código.
- Barra de herramientas conmutable.
- Vista previa en vivo en configuraciones.
- Dimensiones, márgenes, alineación, tamaño de fuente , altura de línea, flotantes, etc.
Ejemplos de inserción de código
Inserción código HTML como Default (Tema Classic)
<!DOCTYPE html> <html> <body> <h1 style="font-family: verdana:">A heading</h1> <p style="font-family: arial; color: red; font-size: 20px;">A paragraph.</p> </body> </html>
Inserción de código HTML como Default (Tema Sublime Text)
<!DOCTYPE html> <html> <body> <h1 style="font-family: verdana:">A heading</h1> <p style="font-family: arial; color: red; font-size: 20px;">A paragraph.</p> </body> </html>
Inserción de código PHP (Tema Epicgeeks)
<?php $archivo = 'mifichero.txt'; // este es el nombre del fichero $fp = fopen($archivo,'r'); // abrimos el fichero $contenido = fread($fp, filesize($archivo)); // leemos el contenido echo $contenido; fclose($fp); // cerramos el fichero ?>
Inserción de código PHP como Default (Tema Familiar)
<?php $archivo = 'mifichero.txt'; // este es el nombre del fichero $fp = fopen($archivo,'r'); // abrimos el fichero $contenido = fread($fp, filesize($archivo)); // leemos el contenido echo $contenido; fclose($fp); // cerramos el fichero ?>
Inserción de código Perl (Tema Raygun)
#! /usr/bin/perl -w
# Pinta los últimos ficheros de un directorio
use Cwd;
$n= shift;
opendir(DIR,&cwd) or dei "No se puede abrir el directorio $dirActual: $!n";
closedir(DIR);
$n--;
for ($i= $=indice - $n; $i <= $#indice; $i**) {
print &cwd . "/$indice[$i]\n";
}
Inserción de código Perl como Default (Tema Son Of Obsidian)
#! /usr/bin/perl -w
# Pinta los últimos ficheros de un directorio
use Cwd;
$n= shift;
opendir(DIR,&cwd) or dei "No se puede abrir el directorio $dirActual: $!n";
closedir(DIR);
$n--;
for ($i= $=indice - $n; $i <= $#indice; $i**) {
print &cwd . "/$indice[$i]\n";
}
Inserción mezcla de código PHP y HTML como Default (Tema X3info)
<?php
if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE) {
?>
<h3>strpos() debe haber devuelto no falso</h3>
<p>Está usando Internet Explorer</p>
<?php
} else {
?>
<h3>strpos() debe haber devuelto falso</h3>
<p>No está usando Internet Explorer</p>
<?php
}
?>
Lenguajes soportados:
- Lenguaje por defecto (un tamaño para todo, marcado de código genérico).
- ABAP
- ActionScript
- AmigaDOS (gracias a amigalog.com)
- Apache
- AppleScript
- Arduino
- Assembly (x86)
- AutoIt
- C
- C#
- C++
- CoffeeScript (gracias a Dai Akatsuka)
- CSS
- Delphi/Pascal (gracias a Chris McClenny)
- Delphi Web Script (gracias a smartmobilestudio)
- Diff (gracias a omniavin)
- Erlang (gracias a Daniel)
- Go
- Haskell
- HTML (XML/XHTML)
- INI
- Lisp
- Lua
- Microsoft Registry (gracias techexplored.com)
- MIVA Script
- Monkey (gracias a Devolonter)
- MS-DOS (gracias a http://www.amigalog.com/?p=334)
- MySQL (gracias a AssemblySys.com y ansas-meyer.de)
- Java
- JavaScript
- Objective-C
- Perl
- PHP
- PL/SQL
- PostgreSQL (gracias a Bitorchestra)
- PowerShell
- Python
- R
- Ruby
- Rust (gracias a Stibbons)
- Scheme (gracias a Harry75369)
- Shell (Unix)
- Transact-SQL
- TeX
- Vim
- Visual Basic
- Visual Basic .NET (gracias a Kevin Gardthausen)
- YAML
- ZSH (gracias Stibbons)
- Se podrán añadir otros cuando se soliciten.
Los idiomas se definen en los archivos de idioma utilizando expresiones regulares para capturar elementos.
Consulta las Especificaciones de Archivos de Lenguajes Crayon para aprender cómo hacer el tuyo propio.
Comparte este contenido si te pareció útil y si crees que le ayudarás a alguien más.
GRATIS consejos, trucos y tips sobre Marketing con Redes Sociales, Tráfico Web y Negocios por Internet para hacer tu negocio, empresa o proyecto más rentable.
Es muy sencillo, sólo déjame tus datos en el formulario que tienes a continuación, será un placer poder ayudarte y además te llevarás un regalo.
Quiero darte las gracias por ayudarme a hacer crecer este blog y pedirte, si te pareció que esta información es útil, que compartas este artículo en Twitter, Facebook o Google +1.
Te acompaña y apoya en tu éxito,
Por mi parte te puedo asegurar que seguiré trabajando para aportar el máximo valor que me sea posible.
No te olvides de déjame tus comentarios más abajo, que con mucho gusto leeré y atenderé. Gracias de veras y de corazón por tu apoyo incondicional.