A Powerful and Highspeed Markdown Parser for Vue

Overview

vue-markdown

npm npm npm

If you want vue-markdown for vue1.X.X, please checkout vue-markdown1.X.X.

A Powerful and Highspeed Markdown Parser for Vue.

Quick start: <vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>

Supported Markdown Syntax:

  • automatic table of contents
  • table & class customize
  • *SyntaxHighlighter
  • definition list
  • strikethrough
  • GFM task list
  • abbreviation
  • superscript
  • subscript
  • footnote
  • insert
  • *katex
  • emoji
  • mark

*SyntaxHighlighter work with Prism recommend

*katex need add katex css.

Example

simple

webpack-simple

Live Demo

Installation

Browser globals

The dist folder contains vue-markdown.js with the component exported in the window.VueMarkdown object.

<body>
  <vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>
</body>
<script src="path/to/vue.js"></script>
<script src="path/to/vue-markdown.js"></script>
<script>
    Vue.use(VueMarkdown);
    var vm = new Vue({
        el: "body"
    });
</script>

NPM

$ npm install --save vue-markdown

Yarn

$ yarn add vue-markdown --save

CommonJS

var VueMarkdown = require('vue-markdown');

new Vue({
  components: {
    'vue-markdown': VueMarkdown
  }
})

ES6 (Vue-CLI users)

After installing via Yarn or NPM, use the following snippet in the script portion of the Vue component which you wish to render the Markdown.

import VueMarkdown from 'vue-markdown'

new Vue({
  components: {
    VueMarkdown
  }
})

Slots

<vue-markdown>this is the default slot</vue-markdown>

After setting up the middleware in your vue component above, using the embedded markdown is as easy as writing it between the vue-markdown tags.

VueMarkdown has a default slot which is used to write the markdown source.

TIP: The default slot only renders once at the beginning, and it will overwrite the prop of source!

Props

Prop Type Default Describe
watches Array ["source", "show", "toc"] HTML refresh automatically when the prop in this array changed
source String null the markdown source code
show Boolean true enable render to the default slot automatically
html Boolean true enable HTML syntax in source
xhtml-out Boolean true <br></br> => <br />
breaks Boolean true \n => <br>
linkify Boolean true autoconvert URL-like text to link
emoji Boolean true :) => 😃
typographer Boolean true enable some language-neutral replacement and quotes beautification
lang-prefix String language- CSS language prefix for fenced blocks
quotes String “”‘’ use “”‘’ for Chinese, „“‚‘ for German, «»„“ for Russian
table-class String table customize html class of the <table>
task-lists Boolean true enable GFM task list
toc Boolean false enable automatic table of contents
toc-id String undefined the HTML id to render TOC
toc-class String table customize html class of the <ul> wrapping the TOC
toc-first-level Number 2 use 2 if you want to skip <h1> from the TOC
toc-last-level Number 'toc-first-level' + 1 use 5 if you want to skip <h6> from the TOC
toc-anchor-link Boolean true enable the automatic anchor link in the headings
toc-anchor-class String toc-anchor customize the anchor class name
toc-anchor-link-symbol String # customize the anchor link symbol
toc-anchor-link-space Boolean true enable inserting a space between the anchor link and heading
toc-anchor-link-class String toc-anchor-link customize the anchor link symbol class name
anchorAttributes Object {} anchor tag attributes such as target: '_blank' or rel: 'nofollow'
prerender Function (String) String null filter function before markdown parse
postrender Function (String) String null filter function after markdown parse

Events

Name Param[Type] Describe
rendered outHtml[String] dispatch when render finish
toc-rendered tocHtml[String] dispatch when TOC render finish, never dispatch if the toc[prop] is false

Thanks

Contributions

License

Copyright (c) 2016 miaolz123 by MIT

Comments
  • vue-markdown is not rendering

    vue-markdown is not rendering

    Hi,

    I try to generate markdown but does'nt work:

    <template>
        <vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>
    </template>
    
    <script>
      import VueMarkdown from 'vue-markdown'
    
      export default {
        components: {
          VueMarkdown
        }
      }
    
    </script>
    

    output is: i am a ~~tast~~ **test**. in a <div>

    bug 
    opened by ozee31 12
  • Anchor tags options

    Anchor tags options

    Purpose of this PR is to add in the ability to define attributes you want on anchor tags. The problem I am trying to solve is

    1. Open links in a new tab (Solved in version 2.1.4)
    2. Also protect against target="_blank" XSS attacks

    To use this new attribute, it might look something like this

    <template>
        <vue-markdown :anchorAttributes="anchorAttributes">{{ text }}</vue-markdown>
    </template>
    <script>
    export default {
        data: () {
            anchorAttributes: {
                target: '_blank',
                rel: 'noopener noreferrer nofollow'
            }
        }
    }
    </script>
    

    Please comment with any suggestions or improvements you would like to see.

    opened by printscreen 9
  • Hi, how can I use syntaxhighligt?

    Hi, how can I use syntaxhighligt?

    opened by zhangqiongyu 7
  • How to use external .md file?

    How to use external .md file?

    I base on Meteor + Vue.

    // changelog.md
    # Vue markdown
    ...........
    ----------
    <template>
       <vue-markdown source="./changelog.md"></vue-markdown>
    </template>
    

    But don't work, please help me

    opened by thearabbit 4
  • Import external markdown

    Import external markdown

    I'm a JS and Vue.js noob so forgive me if this a dumb question.

    Is there a way to parse and render markdown text from a .md file stored in my static folder? Maybe using import or webpack?

    If yes I think documenting this would be a great addition :-)

    help wanted 
    opened by guillaumemolter 4
  • vue2 node 模式下 :source 无法使用

    vue2 node 模式下 :source 无法使用

    使用:source没有效果

    检查下了源码,发现 mounted 中 没有处理 :source 这样的方式,简单修改了下,希望作者修复下

    修改前:

    153   mounted() {
    154     if (this.$el.childNodes.length > 0) {
    155       this.source = ''
    156       for (let el of this.$el.childNodes) {
    157         const ext = el.outerHTML ? el.outerHTML : el.textContent
    158         this.sourceOut += ext
    159       }
    160     }
    161     rende(this)
    162     this.$watch('source', () => { rende(this) })
    163     this.watches.forEach((v) => {
    164       this.$watch(v, () => { rende(this) })
    165     })
    166   },
    

    修改后:

    153   mounted() {
    154     if (this.$el.childNodes.length > 0) {
    155       this.source = ''
    156       for (let el of this.$el.childNodes) {
    157         const ext = el.outerHTML ? el.outerHTML : el.textContent
    158         this.sourceOut += ext
    159       }
    160     }else{
    161         this.sourceOut = this.source
    162     }
    163     rende(this)
    164     this.$watch('source', () => { this.sourceOut = this.source; rende(this) })
    165     this.watches.forEach((v) => {
    166       this.$watch(v, () => { rende(this) })
    167     })
    168   },
    
    bug 
    opened by pjialin 4
  • Bundle Size Reduction

    Bundle Size Reduction

    Is there any way to opt in to portions of the vue-markdown package for limited functionality and a smaller build? The bundle is prohibitively large for a simple markdown display component.

    https://bundlephobia.com/[email protected]

    opened by brophdawg11 3
  • Error: Invalid default value for prop

    Error: Invalid default value for prop "anchorAttributes"

    v2.2.1: [Vue warn]: Invalid default value for prop "anchorAttributes": Props with type Object/Array must use a factory function to return the default value.

    opened by transcranial 3
  • Feature Request: compatibility with Server Side Rendering (SSR)

    Feature Request: compatibility with Server Side Rendering (SSR)

    In combination with nuxt, vue-markdown doesn't pre-render when running nuxt generate.

        <vue-markdown>{{ content }}</vue-markdown>
    

    The element is there but, the content doesn't appear on the generated html page (the vue-markdown element is empty), although it works perfectly fine in spa mode. This is because the vue-markdown parsing logic is not executed in SSR mode. It would be great to add this feature, or offer the possibility to pre-process the html in nuxt's asyncData or fetch function.

    opened by robindierckx 2
  • server side rendering?

    server side rendering?

    Hey, I just added vue-markdown to my project. It's an isomorphic app that needs to be SEO optimized and this component seems to not render on the server.

    Is it possible somehow already or does it have to be implemented?

    Regards

    opened by devCrossNet 2
  • VueMarkdown doesn't load new data when I navigate inside one component

    VueMarkdown doesn't load new data when I navigate inside one component

    Hello everyone!

    I use vue-markdown component and inside it {{ news.text }}. When I navigate from News.vue to ExactNews.vue it's component destroyed and rendered again. When I navigate inside 1 component ExactNews.vue (next and previous news) component not destroyed and vue-markdown save old data (inside Vue tool in browser I see old data in sourceData -> in VueMarkdown component and inside event -> payload (old data) emitted by VueMarkdown)

    How can I solve this problem???

    opened by aika-ssha 2
  • 启动项目时控制台报错

    启动项目时控制台报错

    启动项目时控制台报错: babel-runtime/core-js/get-iterator in ./node_modules/vue-markdown/dist/vue-markdown.common.js babel-runtime/core-js/object/keys in ./node_modules/vue-markdown/dist/vue-markdown.common.js

    按照提示安装时同样报错

    opened by fade24away 0
  • vue3 错误提示使用时 报错 createElement is not a function

    vue3 错误提示使用时 报错 createElement is not a function

    代码

    <template>
      <Mgr>
        <vue-markdown :source="mdText"></vue-markdown>
      </Mgr>
    </template>
    
    <script>
    import Mgr from '@/components/mgr/Mgr'
    import VueMarkdown from 'vue-markdown'
    
    export default {
      name: "WebDoc",
      components: {Mgr, VueMarkdown},
      data() {
        return {
          mdText: '# aaa'
        }
      },
    }
    </script>
    <style lang="less" scoped>
    </style>
    

    image

    错误内容

    vue-markdown.common.js?9ce6:325 Uncaught (in promise) TypeError: createElement is not a function
        at Proxy.render (vue-markdown.common.js?9ce6:325)
        at renderComponentRoot (runtime-core.esm-bundler.js?5c40:893)
        at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:5030)
        at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:167)
        at setupRenderEffect (runtime-core.esm-bundler.js?5c40:5156)
        at mountComponent (runtime-core.esm-bundler.js?5c40:4939)
        at processComponent (runtime-core.esm-bundler.js?5c40:4897)
        at patch (runtime-core.esm-bundler.js?5c40:4489)
        at mountChildren (runtime-core.esm-bundler.js?5c40:4685)
        at processFragment (runtime-core.esm-bundler.js?5c40:4856)
    

    推测应该是 highlight.js 库不支持导致的,需要升级应该这个库

    opened by tech-xs 0
A Powerful and Highspeed Markdown Parser for Vue

vue-markdown If you want vue-markdown for vue1.X.X, please checkout vue-markdown1.X.X. A Powerful and Highspeed Markdown Parser for Vue. Quick start:

Starshell, Inc. 0 Jan 4, 2019
A Simple and Highspeed Markdown Parser for Vue

VueSimpleMarkdown A Simple and Highspeed Markdown Parser for Vue Installation npm install --save vue-simple-markdown Usage Bundler (Webpack, Rollup) i

Vivify Ideas 82 Jun 29, 2022
A Minimal and Highspeed Markdown Parser for Vue

This fork is intended to work with Webpack 4 and Babel 7, it's open for issues and help is welcome, for now: Added : markdown-it-container markdown-it

Zeth 0 Feb 15, 2020
A simple markdown parser for Vue using markdown-it.

vue-markdown-render is a simple and lightweight wrapper for markdown-it with full TypeScript support.

null 20 Sep 22, 2022
Vue component wrapping the tiny Markdown parser Snarkdown

Single dependency Vue component wrapping the tiny Markdown parser Snarkdown

Swayable 3 Jan 30, 2022
A parser for fis3 to compile markdown file to vue components

A parser for fis3 to compile markdown file to vue components.

ruixing 0 Apr 12, 2018
perfect-markdown is a markdown editor based on Vue & markdown-it.

A markdown editor based on Vue & markdown-it

null 41 Jun 23, 2022
Vue Markdown component, can parse local or remote .md files and markdown strings into HTML display

Vue Markdown component, parse local or remote .md files and markdown strings into HTML display

socialuni 2 Apr 1, 2022
A book builder which supports markdown and vue in markdown file.

Introductions Mac only for now. Windows support later. It is a command cli. It will process markdown files into website. You can write vue code in mar

hoperyy 1 Mar 8, 2019
A markdown component and independent markdown compiler.

A markdown component and independent markdown compiler.

Lazybones 1 May 5, 2022
Runtime markdown processor with support for injecting your custom Vue components into your markdown text.

vue-components-markdown Not tested with Vue3 yet What is vue-components-markdown? vue-components-markdown is a runtime markdown processor with support

Ivan Jolic 2 Sep 6, 2022
Convert Markdown file to Vue Component using markdown-it.

vue-antd-md-loader md-loader based on vue-markdown-loader Convert Markdown file to Vue Component using markdown-it. Example ant-design-vue Installatio

vueComponent 7 Aug 12, 2022
A markdown project to preview in real time when user write notes in markdown

markdown-project The notebook app will allow the user to write notes in markdown The markdown will be previewed in real time The users will be able to

Manuel O. 0 Nov 10, 2021
ServiceStack Markdown Editor is a developer-friendly Markdown Editor for Vuetify Apps

ServiceStack Markdown Editor is a developer-friendly Markdown Editor for Vuetify Apps which is optimized GitHub Flavored Markdown where it supports popular short-cuts for editing and documenting code like tab block un/indenting, single-line and code and comments blocks.

ServiceStack 8 Jun 24, 2020
A Markdown application powered by vue, vditor and element.

A Markdown application powered by vue, vditor and element. This app is a pure web page without any backend for data interactions. Thus, it's convenient to build your own markdown app.

null 7 Mar 24, 2022
Vue markdown editor and marked

Vue markdown editor and marked

orh 1 Jun 11, 2021
A vite plugin to import a Markdown file in various formats like Front Matter, HTML, ToC, and React/Vue Component

A vite plugin to import a Markdown file in various formats like Front Matter, HTML, ToC, and React/Vue Component

Kengo Hamasaki 132 Sep 26, 2022
Static site generator with Vue and Markdown

Static site generator with Vue and Markdown

null 1 Apr 19, 2022