# Vue.js Syntax Highlighting with highlight.js

DevFeed: [Vue.js Syntax Highlighting with highlight.js](<https://devfeed.tech/articles/vue-js-syntax-highlighting-with-highlight-js-31844.md>)

Original publisher: [Read original article](<https://www.metachris.dev/2017/02/vuejs-syntax-highlighting-with-highlightjs/>)

Author: Chris Hager

Published: 2017-02-01T00:00:00Z

Content type: tutorial

Language: en

Sources: [Chris Hager](<https://devfeed.tech/sources/chris-hager.md>)

Topics: [Highlight.js](<https://devfeed.tech/topics/highlightjs.md>), [Syntax Highlighting](<https://devfeed.tech/topics/syntax-highlighting.md>), [Vue.js](<https://devfeed.tech/topics/vue.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [javascript](<https://devfeed.tech/tags/javascript.md>), [npm](<https://devfeed.tech/tags/npm.md>), [syntax-highlighting](<https://devfeed.tech/tags/syntax-highlighting.md>), [vue-js](<https://devfeed.tech/tags/vue-js.md>)

## AI overview

A tutorial showing how to use highlight.js for syntax highlighting in a Vue.js application, including a custom v-highlightjs directive that handles initial rendering and source-code updates.

## Source excerpt

Everyone loves a good syntax highlighting. This post explains how to use highlight.js for syntax highlighting in a Vue.js application. The method shown here allows syntax highlighting both on original creation of an element as well as on updates to the source-code, using a simple v-highlightjs directive such as this: <pre v-highlightjs><code class="javascript"></code></pre> You can see a live example here: jsfiddle.net/metachris/1vz9oobc. To achieve this, we just need to install the highlight.