style of vue-showdown not show with vue template

[Navyroot]

index.js

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;
import VueShowdown from 'vue-showdown'

// the second parameter of Vue.use() is optional
Vue.use(VueShowdown, {
  // set default flavor of showdown
  flavor: 'github',
  // set default options of showdown (will override the flavor options)
  options: {
    emoji: false,
  },
})

new Vue({
  render: h => h(App),
}).$mount('#app');

Vue template code :

<template>
  <div>
    <vue-showdown :markdown="fileContent"></vue-showdown> 
  </div>
</template>
<script>
import fileMd from 'raw-loader!../README.md'
export default {
  name: 'app',
  data() {
    return {
      fileContent: '## __Hello__',
    }
  },
  mounted() {
    this.fileContent = fileMd
  },
}
</script>

Markdown script :

Result of my test page:

Result demo page :

[meteorlxy]

The markdown style does not come with vue-showdown nor showdown. You need to import it yourself.

The style of demo page comes from vuepress.

Try github-markdown-css, and add .markdown-body on your vue-showdown component.

[Navyroot]

Thx 🙏 , it's work .

[Navyroot]

How about Syntax highlighting ? Like this :

var foo = function(bar) {
  return bar++
}

console.log(foo(5))

package main

import "fmt"

func main() {
    fmt.Println("Hello, world!")
}

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

[meteorlxy]

It's out of scope of this vue component.

You can try something like highlight.js

[Navyroot]

Yes,thank I will try 😃

[aycakahya]

I have the same problem, how did you find a solution?