Resaltado de código con Vue highlightjs

Te presentaré como usar el Vue highlightjs para resaltar tu cógido.

Te quería mostrar cóm puedes resaltar tu código en caso de que estés haciendo este tipo de implementación y en este caso yo estoy ampliando el plugin de Vue highlight js tal cual puedes ver:

npm install --save vue-highlightjs

Con el cual tuviéramos el siguiente resultado que puedes ver por aquí en pantalla el tema ya se lo puedes cambiar ya existen varios temas ahí lo puedes revisar en la documentación oficial así que vamos aquí rapidito primero es obviamente instalar la dependencia en este caso yo estoy empleando como siempre un proyecto en Laravel así que:

npm install --save vue-highlightjs

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)

Ya con esto terminamos la configuración así que faltaría utilizarlo cómo lo utilizamos yo en este caso lo quiero utilizar en este llamado visor por aquí defino el tema como te comentaba existen muchos ahí lo puedes revisar justamente la carpeta que te genera internamente tu el highlight aquí también te lo dice la documentación oficial tenemos varios aquí están justamente en esta carpeta otra vez esto es de referencia a la carpeta de los módulos de no buscas el de Vue con el tema y puedes emplear cualquiera de estos puedes emplear otros o extenderlo:

node_modules\vue-code-highlight\themes\*

Por ejemplo:

prism-twilight.css

Eso depende de ti y en este caso estoy empleando este llamado prc que se encuentra por aquí pero tengo acceso al resto también tal cual puedes ver entonces esto lo colocas es la parte donde quieres emplear el el resaltado para el código tal cual puedes ver que en mi caso es el visor y por lo demás ya eso sería prácticamente todo bueno punto importante tienes que colocarlo en la sintaxis que te muestra por acá en el objeto pre:

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

<!-- If you want to highlight hardcoded source-code -->
<pre v-highlightjs><code class="javascript">const s = new Date().toString()</code></pre

Y aquí el código esto si estás empleando es c editor lo tienes de manera directa tal cual puedes ver aquí yo simplemente seleccioné el texto le di aquí al bloque de código y eso sería prácticamente todo ya que con esto se agrega la estructura que necesita el plugin para poder funcionar si busco aquí pre por aquí lo puedes ver aquí también lo puedes indicar que si es html y demás Pero bueno yo lo dejo así definido por defecto para que simplemente resalte y con esto ya tuviéramos Listo ya el plugin de highlight para poder emplear nuestro desarrollo que es 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>

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

10-10-2024 - Andrés Cruz

In english

• Categoría
• /
• Vue
• /
• Resaltado de código con Vue highlightjs