title: How to put Vue code inside <code> tag in vue
body: <p>This is my first time making an npm package, I'm making the package's demo, and I wanna put an example of the component usage.</p>
  
  <p>when I put the component usage inside pre and code tag like this </p>
  
  <p>it shows this error </p>
  
  <pre><code>Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as &lt;style&gt;, as they will not be parsed.
  </code></pre>
  
  <p>this is my code (App.vue):</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
  &lt;pre&gt;
      &lt;code&gt;
          &lt;template&gt;
              &lt;vlider
              :id="'first'"
              :vlider-data="slider"
              :theme="'theme-dark'"
              v-model="inputRange"
              @click="vliderClick()"
              &gt;
                  &lt;template&gt; slot="bullet" slot-scope="bullet"
                      &lt;label&gt;{{ bullet.data.label }}&lt;/label&gt;
                      &lt;i
                      class="em"
                      :class="[`em-${bullet.data.extras.icon}`]"
                      &gt;&lt;/i&gt; 
                      &lt;a target="_blank" :href="bullet.data.extras.learnMore"&gt;Learn more ?&lt;/a&gt;
                  &lt;/template&gt;
              &lt;/vlider&gt;
          &lt;/template&gt;
          &lt;script&gt;
              import Vlider from "vlider";
  
              export default {
                  name: "app",
                  components: {
                      Vlider
                  },
                  data() {
                      return {
                          inputRange: null,
                          slider: [
                              {label: "Angry", color: "#ffc300", extras: { icon: 'angry', learnMore: 'http://localhost/'}},
                              {label: "Expressionless", color: "#ffb0fe", extras: { icon: 'expressionless', learnMore: 'http://localhost/'}},
                              {label: "Astonished", color: "#ff6bd6", extras: { icon: 'astonished', learnMore: 'http://localhost/'}},
                              {label: "Confounded", color: "#ff9d76", extras: { icon: 'confounded', learnMore: 'http://localhost/'}},
                              {label: "Okay?", color: "#51eaea", extras: { icon: 'face_with_raised_eyebrow', learnMore: 'http://localhost/'}},
                              {label: "Blush", color: "#fb3569", extras: { icon: 'blush', learnMore: 'http://localhost/'}}
                          ]
                      };
                  },
                  watch: {
                      inputRange() {
                          console.log(this.inputRange)
                      }
                  },
                  methods: {
                      vliderClick() {
                          console.log(`clicked`)
                      }
                  }
              };
          &lt;/script&gt;
          &lt;style&gt;
              import "vlider/src/sass/vlider.scss"
          &lt;/style&gt;
      &lt;/code&gt;
  &lt;/pre&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Vlider from "vlider";
  ...
  &lt;/script&gt;
  </code></pre>
  
  <p>I expect it to work like how normal  tag in HTML works.
  I've tried downloading some code blocks npm packages, it still doesn't work, i need you guys helps and suggestions with this, thanks for your help</p>