Resaltado de código con Vue Highlight.js

▶

Resaltar bloques de código en una aplicación Vue es una necesidad bastante común, sobre todo cuando trabajas con documentación, blogs técnicos, paneles de administración o contenido que viene directamente de un editor o CMS. En estos casos, Highlight.js encaja muy bien con Vue porque es flexible, ligero y no te obliga a montar una arquitectura complicada.

En mi caso, esta necesidad apareció al trabajar con un proyecto en Vue integrado con Laravel, donde el contenido HTML (incluidos bloques de código) venía directamente desde base de datos. La clave no era solo que se viera bonito, sino que funcionara de forma automática y sin fricción.

En este artículo te explico cómo usar Highlight.js en Vue, tanto en Vue 2 como en Vue 3, con ejemplos reales y decisiones prácticas.

Por qué necesitas resaltar código en una aplicación Vue

Cuando muestras código sin formato, el resultado suele ser difícil de leer y poco profesional. El resaltado de sintaxis mejora:

• La legibilidad
• La comprensión del código
• La experiencia de usuario
• El aspecto visual del contenido

Esto se vuelve todavía más importante cuando el código no está hardcodeado, sino que viene de un editor WYSIWYG, Markdown o un CMS. En ese escenario, necesitas una solución que funcione después de renderizar el HTML, no antes.

Qué es Highlight.js y por qué encaja tan bien con Vue

Highlight.js es una librería JavaScript especializada en resaltado de sintaxis. No depende de frameworks y funciona directamente sobre el DOM, lo cual la hace ideal para Vue.

Entre sus ventajas principales:

• Detección automática del lenguaje
• Soporte para más de 180 lenguajes
• Gran cantidad de temas visuales
• Funciona con la estructura estándar <pre><code>
• Integración sencilla mediante plugins o directivas

Algo que personalmente me resultó muy práctico es que no siempre necesitas indicar el lenguaje. En muchos casos, el autodetect funciona perfectamente y te ahorra trabajo.

Cómo instalar Highlight.js en un proyecto Vue

La instalación depende ligeramente de si usas Vue 2 o Vue 3, pero el concepto es el mismo.

$ npm install --save vue-highlightjs

El resultado que buscamos es el que puedes ver por aquí en pantalla: un bloque de código con el resaltado de sintaxis aplicado.

El tema visual (colores y estilos) se lo puedes cambiar fácilmente; ya existen varios temas predefinidos que puedes revisar en la documentación oficial de la librería.

También puedes instalarlo mediante

$ yarn add highlight.js

Si usas un wrapper específico para Vue (muy común en proyectos Vue 2), puedes encontrar paquetes como (esto te sirve si es un proyecto en Nodo o Laravel):

$ npm install --save vue-highlightjs

Configuración inicial de Highlight.js en Vue

El siguiente paso sería configurarlo de la siguiente forma cosa que ya yo hice vine aquí el plugin por aquí lo tenemos y todo el mundo feliz:

// Import Vue and vue-highlgihtjs
import Vue from 'vue'
import VueHighlightJS from 'vue-highlightjs'

// Tell Vue.js to use vue-highlightjs
Vue.use(VueHighlightJS)

Importación de estilos (themes)

Ya con esto terminamos la configuración de la librería, así que el siguiente paso es utilizarla.

Yo, en este caso, quiero usarla en este componente llamado Visor. Aquí defino el tema que deseo aplicar. Como te comentaba, existen muchos temas disponibles; puedes revisarlos directamente en la carpeta que te genera la librería.

La documentación oficial te indica que los temas se encuentran justamente en la carpeta interna de node_modules. Busca el módulo de la librería (Vue Highlight) y, dentro de su carpeta, encontrarás las opciones de temas que puedes emplear (o incluso extender).

node_modules\vue-code-highlight\themes\*

Por ejemplo:

prism-twilight.css
import 'vue-code-highlight/themes/prism-tomorrow.css'

Simplemente revisa la carpeta de temas dentro de node_modules y elegí el que mejor encajaba con el diseño del proyecto. Puedes cambiarlos sin tocar nada del código JavaScript.

Cómo resaltar código en Vue usando Highlight.js

Highlight.js funciona detectando bloques con esta estructura:

<pre>
 <code class="javascript">
   const x = new Date().toString()
 </code>
</pre>

Con esto ya tienes resaltado automático si el plugin está correctamente configurado.

• Uso con código hardcodeado
  • Si el código es estático, no hay mucho misterio. Simplemente escribes el bloque y listo.
• Uso con contenido dinámico
  • En muchos proyectos, el HTML viene desde una base de datos y se renderiza usando v-html. En mi caso, este fue exactamente el escenario: artículos creados desde un editor, con bloques de código incluidos.
  • Ahí no puedes usar un componente por cada bloque. Necesitas algo más flexible.

Resaltando código dinámico en Vue con v-html

Cuando el contenido viene de v-html, Highlight.js no se ejecuta automáticamente sobre ese HTML recién renderizado. La solución más limpia es aplicar el resaltado a un contenedor padre.

Por ejemplo:

<pre v-highlightjs="sourcecode">
  <code class="javascript"></code>
</pre>

O incluso:

<div v-highlight>
  <section class="post" v-html="section.content"></section>
</div>

Este enfoque simplifica muchísimo las cosas. No tienes que preocuparte de cada bloque individual; mientras el HTML tenga <pre><code>, el plugin hace su trabajo.

Directiva o componente: qué enfoque conviene usar en Vue

• Ventajas de usar directivas
  • Perfectas para contenido dinámico
  • Ideales cuando usas v-html
  • Menos código repetido
  • Más control sobre cuándo se ejecuta el resaltado
• Cuándo usar un componente <highlightjs>
  • Cuando el código es estático
  • Cuando quieres controlar cada bloque manualmente
  • Cuando estás construyendo una librería o un playground

Ambos enfoques son válidos, pero no conviene mezclarlos sin motivo, porque suele generar confusión y duplicar lógica.

Cómo cambiar el tema de Highlight.js en Vue

Cambiar el tema es probablemente la parte más fácil.

Solo tienes que importar otro archivo CSS:

import 'highlight.js/styles/github.css'

Los temas suelen estar en rutas como:

node_modules/vue-code-highlight/themes/*

Puedes probar varios hasta encontrar el que mejor se adapte a tu diseño. Incluso puedes extenderlos con tu propio CSS si lo necesitas.

Errores comunes al usar Highlight.js en Vue y cómo evitarlos

Después de usar Highlight.js en proyectos reales, estos son los errores más frecuentes que he visto:

• El código no se resalta
  • Falta importar el theme
  • El HTML no usa <pre><code>
• El contenido viene sanitizado
  • El editor elimina las etiquetas necesarias
  • El HTML se renderiza como texto plano
• Problemas con Vue 3
  • Uso de plugins antiguos no compatibles
  • Mezclar APIs de Vue 2 y Vue 3
• Confusión entre plugins
  • vue-highlightjs ≠ @highlightjs/vue-plugin
  • No todos sirven para todos los proyectos

✍️ Activación del Resaltado de Sintaxis (Highlighting)

Una vez que tienes el texto listo, el código se inserta fácilmente. Si estás empleando un editor como el que utilizo (que permite seleccionar y aplicar formato), lo tienes de manera directa.

Tal cual puedes ver aquí, yo simplemente seleccioné el texto y le di al bloque de código. Esto sería prácticamente todo, ya que con esta acción se agrega la estructura que necesita el plugin para poder funcionar. .

Si busco la etiqueta pre, aquí puedes verla. También podrías indicar explícitamente si el contenido es HTML, JavaScript, etc., pero yo lo dejo así definido por defecto para que simplemente resalte.

Con esto, ya tendríamos listo el plugin de highlight para que puedas emplearlo en tu desarrollo. Lo que quieras hacer con él ya depende de ti.

A continuación, un ejemplo de un componente en Vue que emplea el resaltado de código:

<template>
 <div v-highlight>
   <section class="post" v-html="section.content"></section>
 </div>
</template>
***
<script>
import "vue-code-highlight/themes/prism-tomorrow.css"

export default {
 data() {
   return {
     book: Object,
   };
 },
<script>

También, debemos de configurar un atributo v-highlight a un elemento padre para que el plugin aplique el estilo.

Preguntas frecuentes sobre Vue y Highlight.js

• ¿Highlight.js funciona con Vue 3?
  • Sí, usando el plugin oficial @highlightjs/vue-plugin.
• ¿Puedo resaltar código que viene de una base de datos?
  • Sí, siempre que el HTML incluya <pre><code> y apliques el resaltado después del renderizado.
• ¿Es obligatorio indicar el lenguaje?
  • No. El autodetect suele funcionar muy bien.
• ¿Cuál es el mejor plugin para Vue?
  • Depende del proyecto, pero en Vue 3 el oficial es la mejor opción.

Conclusión: cuándo usar Highlight.js en Vue (y cuándo no)

Highlight.js es una solución sólida, probada y flexible para resaltar código en Vue. Especialmente recomendable si:

• Trabajas con contenido dinámico
• Usas editores o CMS
• Necesitas algo rápido y mantenible
• No quieres reinventar la rueda

En proyectos como el mío, donde el código viene ya maquetado desde base de datos, aplicar el resaltado a un contenedor padre fue la decisión correcta. Menos complejidad y mejores resultados.