markdown-content-vue

Markdown content vue

Based on @nuxt/content code.

View instructions on link

Features

• Parse content
• Html
• Vue components
• Codeblocks (Prismjs)

Install

npm install markdown-content-vue --save

Usage

Import

import { markdownContent, markdownParse } from 'markdown-content-vue'

Template

<markdownContent :document="code" />

Script

Register component

components: {
    markdownContent
}

And parse Markdown

async mounted() {
    const md = new markdownParse()
    const file = '---\ntitle: test\n---\n# Hello World\n ```javascript\n console.log("Hello") \n```\n<HelloWorld></HelloWorld> \n'
    this.code = await md.toJSON(file)
    console.log(this.code)
  },

Beautiful example

Install github-markdown-css

npm install github-markdown-css

Import

import 'github-markdown-css/github-markdown.css'
import 'prismjs/themes/prism-tomorrow.css'

Template

<markdownContent class="markdown-body" :document="code" />