6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

QiitaでVue.jsのシンタックスハイライトが使えるようになってる件

Last updated at Posted at 2018-11-18

Qiitaで、Vue.jsの単一ファイルコンポーネント(.vueファイル)のシンタックスハイライトが使えるようになっています。

今まで

今まではコードブロックの言語の選択肢にvueがなかったので、htmlで代用していました。
当然ですが、templatescriptstyleの各ブロックが単なる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>

おわりに

コードブロックには適切な言語を指定してシンタックスハイライトが効くようにしましょう。

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?