SushiHost

Tutorial WordPress: Personalizar el bloque de código (code/pre) con temas oscuros

SushiHost

·

·

Introducción

Este tutorial explica paso a paso cómo personalizar el bloque de código (code / pre) en WordPress para aplicar temas oscuros profesionales, accesibles y responsivos. Incluye alternativas: solo CSS (rápido), integración con resaltadores de sintaxis (PrismJS/EnlighterJS) y una opción con conmutador manual para usuarios. Todos los ejemplos de código vienen listos para pegar en tu tema o en un plugin de funciones.

Recomendaciones previas

Enfoques posibles

  1. CSS puro: lo más sencillo y rápido si solo quieres un aspecto oscuro para los bloques code y pre.
  2. Resaltador de sintaxis (PrismJS, EnlighterJS, Highlight.js): añade colores por token y opciones como numeración de líneas o copia al portapapeles.
  3. Combinado: CSS para el contenedor y un resaltador para la coloración por lenguaje.

Selección de selectores clave

Los selectores que conviene tener en cuenta en WordPress (Gutenberg) son:

CSS base para un tema oscuro moderno

Este CSS proporciona fondo oscuro, tipografía monoespaciada, bordes redondeados, sombra suave, espaciado y scroll horizontal. Pégalo en tu archivo style.css del child theme, en el personalizador (CSS adicional) o en un archivo CSS encolado.

/ Tema oscuro para bloques de código y pre /
:root {
  --code-bg: #0b1220        / fondo principal /
  --code-panel: #0f1724     / panel ligeramente distinto /
  --code-border: rgba(255,255,255,0.06)
  --code-text: #d7e1ff      / texto principal /
  --code-muted: #9aa4c0     / texto secundario /
  --code-accent: #7dd3fc    / acentos, enlaces /
  --code-radius: 8px
  --code-font-size: 14px
  --code-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Roboto Mono, Source Code Pro, monospace
}

/ Target global para pre con lenguaje y bloques Gutenberg /
pre[class=language-],
.wp-block-code pre,
pre {
  background: linear-gradient(180deg, var(--code-bg), var(--code-panel))
  color: var(--code-text)
  border: 1px solid var(--code-border)
  border-radius: var(--code-radius)
  padding: 1rem 1.25rem
  font-family: var(--code-font-family)
  font-size: var(--code-font-size)
  line-height: 1.6
  overflow: auto
  tab-size: 4
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  margin: 1.25rem 0
}

/ Código inline dentro de párrafos /
p code,
li code {
  background: rgba(255,255,255,0.03)
  padding: .15rem .4rem
  border-radius: 4px
  font-size: .95em
  color: var(--code-text)
}

/ Línea destacada (si el resaltador añade clases como .line-highlight) /
pre .line-highlight {
  background: rgba(125,211,252,0.06)
  display: block
  width: calc(100%   2.5rem)
  margin-left: -1.25rem
  padding-left: 1.25rem
}

/ Ajuste de scroll: barra discreta /
pre::-webkit-scrollbar {
  height: 10px
  background: transparent
}
pre::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06)
  border-radius: 999px
}

/ Contrast para los comentarios y tokens secundarios /
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--code-muted)
  font-style: italic
}

/ Enlaces dentro de código (por ejemplo, URLs en comentarios) /
pre a {
  color: var(--code-accent)
  text-decoration: underline
}

/ Responsivo: reduce padding en pantallas pequeñas /
@media (max-width: 480px) {
  pre[class=language-],
  .wp-block-code pre {
    padding: .75rem
    font-size: 13px
  }
}

Encolar el CSS correctamente (functions.php)

Añade una función en functions.php de tu child theme para encolar un archivo CSS propio (por ejemplo: comentarios-dark-code.css). Si prefieres usar CSS adicional en el personalizador, no necesitas este paso.

/ functions.php - Encolar CSS personalizado para bloques de código /
function mi_tema_enqueue_code_styles() {
  // Ajusta la ruta al archivo CSS de tu child theme
  wp_enqueue_style(
    mi-tema-code-dark,
    get_stylesheet_directory_uri() . /css/code-dark.css,
    array(),
    1.0
  )
}
add_action(wp_enqueue_scripts, mi_tema_enqueue_code_styles)

Soporte automático para modo claro/oscuro del sistema

Si quieres que el tema de código cambie según la preferencia del usuario (prefers-color-scheme), puedes definir variables CSS por defecto y sobrescribirlas en una media query.

/ Valores por defecto (claro) /
:root {
  --code-bg: #f6f8fa
  --code-panel: #ffffff
  --code-text: #0b1220
  --code-border: rgba(11,18,32,0.06)
  --code-muted: #586069
  --code-accent: #0366d6
}

/ Si el usuario prefiere modo oscuro, sobrescribimos variables /
@media (prefers-color-scheme: dark) {
  :root {
    --code-bg: #0b1220
    --code-panel: #0f1724
    --code-text: #d7e1ff
    --code-border: rgba(255,255,255,0.06)
    --code-muted: #9aa4c0
    --code-accent: #7dd3fc
  }
}

Integración con PrismJS (opcional)

PrismJS es ligero y permite temas oscuros detallados, numeración de líneas y plugins. Ejemplo de encolado de Prism y un tema oscuro:

/ Encolar PrismJS CSS y JS en functions.php /
function enqueue_prism_assets() {
  wp_enqueue_style(prism-theme, get_stylesheet_directory_uri() . /vendor/prism/prism-okaidia.css, array(), 1.0)
  wp_enqueue_script(prism-js, get_stylesheet_directory_uri() . /vendor/prism/prism.js, array(), 1.0, true)
}
add_action(wp_enqueue_scripts, enqueue_prism_assets)

Si usas Gutenberg, asegúrate de que los bloques de código conserven la clase language-xxx (algunos editores la eliminan). Puedes inicializar Prism en tu JS de tema si es necesario:

/ themescript.js /
document.addEventListener(DOMContentLoaded, function() {
  if (window.Prism) {
    Prism.highlightAll()
  }
})

Integración con EnlighterJS

Si prefieres EnlighterJS (plugin o librería), muchas instalaciones añaden clases propias. Personaliza con CSS similar al mostrado más arriba y encola assets del plugin o librería. Ejemplo de CSS para EnlighterJS:

/ Ajustes para EnlighterJS (si la librería añade .EnlighterJSInline o .EnlighterJSRAW) /
.EnlighterJSRAW,
.EnlighterJSInline {
  background: var(--code-bg)
  color: var(--code-text)
  border-radius: var(--code-radius)
  padding: 1rem
  overflow: auto
}

Conmutador manual de tema (botón oscuro/claro)

Si quieres permitir al usuario elegir, agrega una clase code-theme-dark a la etiqueta html o body y aplica CSS condicionando a esa clase. A continuación un ejemplo de CSS y JS para alternar (pega el JS en tu archivo de scripts del tema).

/ Cuando body tiene la clase .code-theme-dark usamos variables de tema oscuro /
body.code-theme-dark {
  --code-bg: #0b1220
  --code-panel: #0f1724
  --code-text: #d7e1ff
  --code-border: rgba(255,255,255,0.06)
  --code-muted: #9aa4c0
  --code-accent: #7dd3fc
}

/ Toggle simple: guarda preferencia en localStorage /
(function() {
  const btn = document.getElementById(toggle-code-theme)
  if (!btn) return
  btn.addEventListener(click, function() {
    document.body.classList.toggle(code-theme-dark)
    const isDark = document.body.classList.contains(code-theme-dark)
    localStorage.setItem(codeThemeDark, isDark ? 1 : 0)
  })

  / Aplicar preferencia al cargar /
  const pref = localStorage.getItem(codeThemeDark)
  if (pref === 1) {
    document.body.classList.add(code-theme-dark)
  }
})()

Nota: para que el botón funcione debes crear el elemento con id toggle-code-theme en tu plantilla (por ejemplo, un botón en el header). No incluyo el HTML del botón aquí porque las etiquetas permitidas en este artículo son limitadas.

Números de línea y botón de copiar

Muchos resaltadores ofrecen plugins para numeración y copia. Si no los usas, puedes implementar una solución CSS para numeración con counters (aunque es menos robusta). Para copia al portapapeles se requiere JS (ejemplo sencillo abajo).

/ Botón copy para bloques pre (sencillo) /
document.addEventListener(click, function(e) {
  if (!e.target.matches(.btn-copy-code)) return
  const pre = e.target.closest(pre)
  if (!pre) return
  const text = pre.innerText
  navigator.clipboard.writeText(text).then(() => {
    // feedback rápido
    e.target.textContent = Copiado
    setTimeout(() => e.target.textContent = Copiar, 1500)
  })
})

Paleta de colores recomendada

Variable Uso Ejemplo
–code-bg Fondo general #0b1220
–code-panel Panel secundario #0f1724
–code-text Texto principal #d7e1ff
–code-muted Comentarios/metadata #9aa4c0
–code-accent Enlaces/acento #7dd3fc

Accesibilidad y pruebas

Problemas comunes y soluciones rápidas

Resumen de pasos recomendados

  1. Crear/editar archivo CSS en child theme o usar CSS adicional.
  2. Definir variables CSS y estilos base para pre y code (ejemplo arriba).
  3. Encolar el CSS (functions.php) si usas archivos dentro del tema.
  4. Si deseas resaltado avanzado, agregar PrismJS/Enlighter y sus plugins (numeración, copy).
  5. Probar prefers-color-scheme y/o implementar un toggle con persistencia en localStorage.
  6. Verificar contraste y accesibilidad antes de publicar.

Conclusión

Con unos pocos ajustes CSS y la opción de combinarlo con un resaltador como PrismJS o EnlighterJS, puedes lograr bloques de código con un tema oscuro atractivo, accesible y coherente con el diseño de tu sitio WordPress. Los fragmentos mostrados en este artículo son puntos de partida listos para adaptar a tus necesidades y al sistema de construcción de tu tema.

SushiHost

Leave a Reply

Your email address will not be published. Required fields are marked *