I Wanted Syntax Highlighting for Vue.js in Prism

As mentioned in an earlier article, this site's content is built with Nuxt.js and Contentful, and code block syntax highlighting uses Prism.

• Prism.js

We work with Nuxt.js — or really, Vue.js — quite often and would like to feature it more on the blog, but we couldn't get Prism to syntax-highlight Vue.js code, so here's a summary of where things currently stand.

Vue.js is not currently among the supported languages.

• https://prismjs.com/#supported-languages

There's an open issue for it, but no movement so far.

• https://github.com/PrismJS/prism/issues/1665

That issue has a comment suggesting you use markup, but since that gets interpreted as HTML, the result isn't perfect.

This seems to produce a difference like the one described in "Vue.js syntax highlighting now works on Qiita," but for now, using markup seems like the best option.

• Highlighted as markup (looks pretty good overall)

<template>
	<div id="app">
		<h1>My Todo App!</h1>
		<TodoList/>
	</div>
</template>

<script>
import TodoList from './components/TodoList.vue'

export default {
	components: {
		TodoList
	}
}
</script>

<style lang="scss">
@import './variables.scss';

*, *::before, *::after {
	box-sizing: border-box;
}

#app {
	max-width: 400px;
	margin: 0 auto;
	line-height: 1.4;
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: $vue-blue;
}

h1 {
	text-align: center;
}
</style>

• Highlighted as js (not great)

<template>
	<div id="app">
		<h1>My Todo App!</h1>
		<TodoList/>
	</div>
</template>

<script>
import TodoList from './components/TodoList.vue'

export default {
	components: {
		TodoList
	}
}
</script>

<style lang="scss">
@import './variables.scss';

*, *::before, *::after {
	box-sizing: border-box;
}

#app {
	max-width: 400px;
	margin: 0 auto;
	line-height: 1.4;
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: $vue-blue;
}

h1 {
	text-align: center;
}
</style>

Code sample sourced from here.