vuejs使用marked解析成功，但是没有任何样式

Question

最近在用cnode社区的API练习VUE，获取帖子详情的时候需要解析markdown文本。所以就用了marked来解析。经过测试解析是成功了。但是没有任何样式。具体看下面：
<template>
<div class="topic">

<div class="index-content">
  <div class="index-top">
    {{content.title}}
  </div>
  <div class="index-list" v-html="compiledMarkdown">
  </div>
</div>

</div>

</template>

<script lang="babel">
import axios from 'axios'
import config from '../assets/config'
import marked from 'marked'
export default {
data () {

return {
  content: []
}

},
methods: {

markdown() {
    marked.setOptions({
        renderer: new marked.Renderer(),
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        smartLists: true,
        sanitize: true,
        smartypants: false
    })
},
// 获取文章详细内容
getContent: function (mdrender) {
  axios.get(config.ajaxUrl + '/api/v1/topic/' + this.$route.params.id + '?mdrender=false').then((response) => {
    const data = response.data
    if (data.success === true) {
      this.content = data.data
    }
  }).catch((error) => {
    console.log(error);
  })
}

},
computed: {

compiledMarkdown () {
  return marked(this.content.content || '')
}

},
created () {

this.getContent()
this.markdown()

}
}
</script>

<style lang="scss">
.topic{
max-width: 960px;
background: #fff;
margin: 20px auto;
width: 100%;
}
.index-top{
height: 40px;
background: #f6f6f6;
line-height: 40px;
text-align: left;
padding-left: 20px;
}
.index-list{
text-align: left;
}
</style>
最后渲染出来的结果

没有样式，不好看。这是什么原因？没有报错。是不是还要引入什么css文件？

Answer 1

marked只是帮你把md标签解析成html标签而已，样式可以自己写或者搭配高亮插件使用，比如highlight.js

marked.setOptions({
  highlight: function (code, lang, callback) {
    require('pygmentize-bundled')({ lang: lang, format: 'html' }, code, function (err, result) {
      callback(err, result.toString());
    });
  }
});

官网文档的高亮使用方法