Vue-Prism

Simple Vue.js Syntax highlighting with Prism.js

Example


export default {
  name: 'hello',
  data () {
  return {
    msg: 'Welcome to Your Vue.js App'
    }
  }
}

npm install vue-prism --save-dev


// Main file
import Vue from 'vue'
import VuePrism from 'vue-prism'
Vue.use(VuePrism)

import 'prismjs/themes/prism.css'

Add class to the pre tag.
Place supported language code in the language-xxxx class:

<pre class="language-js">
  <code>
    export default {
      name: 'hello'
    }
  </code>
</pre>

<pre class="language-css">
  <code>
    .my-class {
      background-color: red;
      margin: 0;
    }
  </code>
</pre>