vue components

highlight.vue

<template>
  <pre>
    <code class="hljs" :class="hljsCode.language">{{{ hljsCode.value }}}</code>
  </pre>
</template>

<script>
  import hljs from 'highlight.js'

  hljs.configure({
    tabReplace: '  '
  })

  export default {
    props: [
      {
        name: 'code',
        type: String,
        default () {
          return ''
        }
      }
    ],
    computed: {
      hljsCode () {
        return hljs.highlightAuto(this.code)
      }
    }
  }
</script>

<style lang="scss">
  // main.scss
  // @import "~highlight.js/styles/atom-one-light.css";
</style>

marked.vue

<template>
  <article class="markdown-body" v-html="markdown | marked"></article>
</template>

<script>
  import hljs from 'highlight.js'
  import marked from 'marked'

  export default {
    props: [
      {
        name: 'markdown',
        type: String,
        default () {
          return ''
        }
      }
    ],
    filters: {
      marked (code) {
        return marked(code, {
          langPrefix: 'hljs ',
          highlight (code) {
            return hljs.highlightAuto(code).value
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  // main.scss
  // @import "~github-markdown-css";

  .markdown-body {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
</style>