Code highlighting with Vue highlightjs

I wanted to show you how you can highlight your code in case you are doing this type of implementation and in this case I am extending the Vue highlight js plugin as you can see:

npm install --save vue-highlightjs

With which we would have the following result that you can see here on the screen, the theme can now be changed, there are already several themes there you can check it in the official documentation so let's go here quickly first is obviously to install the dependency in this case I am using as always a project in Laravel so:

npm install --save vue-highlightjs

The next step would be to configure it in the following way, which I already did. I came here with the plugin, here we have it and everyone is happy:

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

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

With this we finish the configuration so we just need to use it, how do we use it? In this case, I want to use it in this so-called viewer. Here I define the theme as I was telling you, there are many. You can check it there, precisely in the folder that it generates internally for you, your highlight. Here, the official documentation also tells you. We have several. Here they are precisely in this folder. Again, this is a reference to the modules folder. You don't have to look for the Vue one with the theme and you can use any of these, you can use others or extend it:

node_modules\vue-code-highlight\themes\*

For example:

prism-twilight.css

That depends on you and in this case I am using this one called prc that is here but I have access to the rest as well as you can see so this is the part where you want to use the highlighting for the code as you can see that in my case it is the viewer and for the rest that would be practically everything. Well, an important point is that you have to place it in the syntax that is shown here in the pre object:

<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

And here is the code, if you are using the C editor, you have it directly as you can see here. I simply selected the text, clicked on the code block here and that would be practically everything since with this the structure that the plugin needs to be able to work is added. If I search here pre-here you can see it here, you can also indicate if it is html and so on. But well, I leave it defined like this by default so that it simply highlights and with this we would have the highlight plugin ready to be able to use our development. Whatever you want to do with it is up to you.

For example:

<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>

Also, we need to set a v-highlight attribute to a parent element so that the plugin applies the style.

10-10-2024 - Andrés Cruz

En español

• Category
• /
• Vue
• /
• Code highlighting with Vue highlightjs