PrismでVue.jsをシンタックスハイライトできるようにしたかった

2019.10.02

Prismでは（いまのところ）Vue.jsのシンタックスハイライトができなかった、というまとめ。

以前の記事でも紹介したように、このサイトのコンテンツについてはNuxt.jsとContentful、コードブロックのシンタックスハイライトはPrismを使っています。

Prism.js

我々はNuxt.jsもといVue.jsを使うことがけっこう多いのでブログでも紹介していきたいところなのですが、PrismでVue.jsのコードをシンタックスハイライトすることができなかったので現状をまとめました。

現在対応言語にVue.jsはない。

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

Issueはあがっているものの動きは見られない。

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

↑のIssueに markup を使うといいよ、的なコメントがありますがHTMLとして解釈することになるため完全ではないようです。

これは「QiitaでVue.jsのシンタックスハイライトが使えるようになってる件」のような違いがでるようですが、とりあえずは markup を使うのがよさそうでした。

markup としてハイライト（大体よさそう）

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

js としてハイライト（いまいち）

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

コードの出典はこちら。

written by

小飯塚達也

Tatsuya Koizuka / Chief Engineer