Code highlighting with Vue Highlight.js

▶

Highlighting code blocks in a Vue application is a fairly common necessity, especially when working with documentation, technical blogs, admin panels, or content coming directly from an editor or CMS. In these cases, Highlight.js fits very well with Vue because it is flexible, lightweight, and doesn't force you to set up a complicated architecture.

In my case, this need arose while working on a Vue project integrated with Laravel, where the HTML content (including code blocks) came directly from the database. The key was not just for it to look good, but for it to work automatically and without friction.

In this article, I explain how to use Highlight.js in Vue, both in Vue 2 and Vue 3, with real examples and practical decisions.

Why you need code highlighting in a Vue application

When you display unformatted code, the result is often hard to read and unprofessional. Syntax highlighting improves:

• Readability
• Code understanding
• User experience
• The visual appearance of the content

This becomes even more important when the code is not hardcoded but comes from a WYSIWYG editor, Markdown, or a CMS. In that scenario, you need a solution that works after the HTML is rendered, not before.

What is Highlight.js and why it fits so well with Vue

Highlight.js is a JavaScript library specialized in syntax highlighting. It doesn't depend on frameworks and works directly on the DOM, which makes it ideal for Vue.

Among its main advantages:

• Automatic language detection
• Support for over 180 languages
• Large number of visual themes
• Works with the standard <pre><code> structure
• Simple integration through plugins or directives

Something I personally found very practical is that you don't always need to specify the language. In many cases, autodetect works perfectly and saves you work.

How to install Highlight.js in a Vue project

Installation depends slightly on whether you use Vue 2 or Vue 3, but the concept is the same.

$ npm install --save vue-highlightjs

The result we are looking for is what you can see here on the screen: a code block with syntax highlighting applied.

You can easily change the visual theme (colors and styles); there are already several predefined themes that you can review in the library's official documentation.

You can also install it via

$ yarn add highlight.js

If you use a specific wrapper for Vue (very common in Vue 2 projects), you can find packages like (this works if it's a Node or Laravel project):

$ npm install --save vue-highlightjs

Initial configuration of Highlight.js in Vue

The next step would be to configure it in the following way, which I have already done—here is the plugin, 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)

Importing styles (themes)

With this, we finish the configuration of the library, so the next step is to use it.

In this case, I want to use it in this component called Visor. Here I define the theme I want to apply. As I mentioned, there are many themes available; you can check them directly in the folder generated by the library.

The official documentation tells you that the themes are located precisely in the internal node_modules folder. Look for the library module (Vue Highlight) and, inside its folder, you will find the theme options you can use (or even extend).

node_modules\vue-code-highlight\themes\*

For example:

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

Simply check the themes folder within node_modules and choose the one that best fits the project design. You can change them without touching any JavaScript code.

How to highlight code in Vue using Highlight.js

Highlight.js works by detecting blocks with this structure:

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

With this, you already have automatic highlighting if the plugin is correctly configured.

• Usage with hardcoded code
  • If the code is static, there isn't much mystery. You simply write the block and that's it.
• Usage with dynamic content
  • In many projects, HTML comes from a database and is rendered using v-html. In my case, this was exactly the scenario: articles created from an editor, with code blocks included.
  • In that case, you cannot use a component for each block. You need something more flexible.

Highlighting dynamic code in Vue with v-html

When content comes from v-html, Highlight.js does not automatically execute on that newly rendered HTML. The cleanest solution is to apply the highlighting to a parent container.

For example:

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

Or even:

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

This approach simplifies things greatly. You don't have to worry about each individual block; as long as the HTML has <pre><code>, the plugin does its job.

Directive or component: which approach is better to use in Vue

• Advantages of using directives
  • Perfect for dynamic content
  • Ideal when using v-html
  • Less repeated code
  • More control over when the highlighting is executed
• When to use a <highlightjs> component
  • When the code is static
  • When you want to control each block manually
  • When you are building a library or a playground

Both approaches are valid, but it is not advisable to mix them without reason, as it usually generates confusion and duplicates logic.

How to change the Highlight.js theme in Vue

Changing the theme is probably the easiest part.

You just have to import another CSS file:

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

Themes are usually in paths like:

node_modules/vue-code-highlight/themes/*

You can try several until you find the one that best suits your design. You can even extend them with your own CSS if needed.

Common errors when using Highlight.js in Vue and how to avoid them

After using Highlight.js in real projects, these are the most frequent errors I've seen:

• The code is not highlighted
  • Missing theme import
  • The HTML does not use <pre><code>
• The content comes sanitized
  • The editor removes the necessary tags
  • The HTML is rendered as plain text
• Problems with Vue 3
  • Use of old incompatible plugins
  • Mixing Vue 2 and Vue 3 APIs
• Confusion between plugins
  • vue-highlightjs ≠ @highlightjs/vue-plugin
  • Not all work for all projects

✍️ Activation of Syntax Highlighting

Once you have the text ready, the code is easily inserted. If you are using an editor like the one I use (which allows selecting and applying formatting), you have it directly.

As you can see here, I simply selected the text and clicked on the code block. That's practically it, as this action adds the structure the plugin needs to function.

If I look for the pre tag, you can see it here. You could also explicitly indicate if the content is HTML, JavaScript, etc., but I leave it defined by default so it simply highlights.

With this, we would have the highlight plugin ready for you to use in your development. What you want to do with it is up to you.

Below is an example of a Vue component that uses code highlighting:

<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 must configure a v-highlight attribute on a parent element for the plugin to apply the style.

Frequently asked questions about Vue and Highlight.js

• Does Highlight.js work with Vue 3?
  • Yes, using the official @highlightjs/vue-plugin.
• Can I highlight code that comes from a database?
  • Yes, as long as the HTML includes <pre><code> and you apply the highlighting after rendering.
• Is it mandatory to specify the language?
  • No. Autodetect usually works very well.
• What is the best plugin for Vue?
  • It depends on the project, but in Vue 3 the official one is the best option.

Conclusion: when to use Highlight.js in Vue (and when not to)

Highlight.js is a solid, proven, and flexible solution for highlighting code in Vue. Especially recommended if:

• You work with dynamic content
• You use editors or CMS
• You need something fast and maintainable
• You don't want to reinvent the wheel

In projects like mine, where the code comes already formatted from the database, applying the highlighting to a parent container was the right decision. Less complexity and better results.