Qiitaで、Vue.jsの単一ファイルコンポーネント（.vueファイル）のシンタックスハイライトが使えるようになっています。
今まで
今まではコードブロックの言語の選択肢にvueがなかったので、htmlで代用していました。
当然ですが、template、script、styleの各ブロックが単なるHTMLタグとして認識されています。
AppButton.vue
<template>
<button
class="button"
@click="showMessage">Show message</button>
</template>
<script>
export default {
data () {
return {
message: 'Hello World'
}
},
methods: {
showMessage () {
alert(this.message)
}
}
}
</script>
<style scoped>
.button {
border-radius: 8px;
}
</style>
これから
コードブロックの言語にvueまたはvuejsを指定することで、Vue.jsとしてシンタックスハイライトを効かせることができます。
AppButton.vue
<template>
<button
class="button"
@click="showMessage">Show message</button>
</template>
<script>
export default {
data () {
return {
message: 'Hello World'
}
},
methods: {
showMessage () {
alert(this.message)
}
}
}
</script>
<style scoped>
.button {
border-radius: 8px;
}
</style>
おわりに
コードブロックには適切な言語を指定してシンタックスハイライトが効くようにしましょう。