A Powerful and Highspeed Markdown Parser for Vue

Related tags

markdown vue vue-components
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

Issues
  • 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
  • adds task list support

    adds task list support

    opened by LeFnord 5
  • 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
  • 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
  • 换行符\n好像没有用

    换行符\n好像没有用

    在官方的示例里面输入\n就没有用,尽管breaks为true。

    opened by SidKwok 3
  • 是否缺少了 css 文件

    是否缺少了 css 文件

    使用后没有样式

    opened by Teddy-Zhu 2
  • Dead project.  Check out https://github.com/adapttive/vue-markdown/

    Dead project. Check out https://github.com/adapttive/vue-markdown/

    https://github.com/adapttive/vue-markdown/ is a well-maintained fork of this project.

    opened by osheroff 2
  • 代码块里的注释#会被解析为标题

    代码块里的注释#会被解析为标题

    npm run dev
    # 注释
    

    npm run dev
    
    # 注释
    

    表现不一致

    opened by Ali0722 0
  • is it possible to disable katex

    is it possible to disable katex

    Hi all

    is it possible to disable katex ?

    Thank you

    opened by kotfarepra 1
  • Automatically choice file in CDN: jsdelivr, unpkg

    Automatically choice file in CDN: jsdelivr, unpkg

    With this changes you can use CDN like:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    

    Now you must add path to file like:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-markdown.min.js"></script>
    
    opened by finagin 0
  • Upgrade highlight.js

    Upgrade highlight.js

    I get a security warning on my app because vue-markdown requires 9.X for highlight.js but the vulnerability is only fixed in 10.4.1

    See below

    Screen Shot 2020-12-10 at 11 51 59 am
    opened by MichaelCurrin 1
  • Abandoned project?

    Abandoned project?

    Obligatory warning that this project seems somewhat abandoned at this point, and that you may want to look elsewhere, weary developer.

    Although it will likely continue to work for Vue 2.x indefinitely (no clue on the upcoming Vue 3.x), at time of writing the creator hasn't provided code updates or responded to issues and pull requests for several years. It has some vulnerabilities due to outdated dependencies.

    Bit of a shame, really, as this is the first library you're likely to find on search engines, package managers and CDNs.

    As a possible alternative, markdown-it-vue uses the same underlying library but seems to be more actively maintained.

    opened by querkmachine 11
  • The separator is not displayed

    The separator is not displayed

    opened by miumiu0308 0
  • Does vue-markdown sanitize the input before rendering HTML?

    Does vue-markdown sanitize the input before rendering HTML?

    Hi,

    I was wondering if Vue-Markdown sanitized a given markdown input before outputting HTML on a webpage?

    Thanks,

    Tate

    opened by t8 0
  • How to enable code highliting?

    How to enable code highliting?

    The documentation only mentions code highlighting needs Prism.But how can i configure it?

    opened by incrypto32 1
Generate a Markdown Documentation for a SFC Vue Component. Contribute: https://gitlab.com/vuedoc/md#contribute

Vuedoc Markdown Documentation Generator Generate a Markdown Documentation for a Vue file Table of Contents Install Features Command line usage Command

null 133 Jun 11, 2021
mavonEditor - A markdown editor based on Vue that supports a variety of personalized features

mavonEditor 喜爱 & 想要将mavonEditor变得更好的小伙伴,邮这里 [email protected] ps: 毕业/工作已经把我榨干,能维护mavonEditor的时间越来越少(近两年的重心没有在前端,忘大家谅解:)),希望有能力的小伙伴可以来共同维护好这个小小编辑器! E

HinesZhu 4.9k Jun 13, 2021
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 78 May 7, 2021
A markdown editor component for Vue that renders in place without the need for a preview pane.

vue-markdown-editor A Markdown editor component for Vue that renders in place without the need for a preview pane. This is the component tha

David R. Myers 23 May 27, 2021
📝 Vue SimpleMDE - use simplemde with vue.js

Vue-SimpleMDE Markdown Editor component for Vue.js. Support only vue2.x. Use Setup No longer support Vue1.x, you can modify to use Install npm install

徒言 735 Jun 19, 2021
MkDown is an online markdown editor built with vueJs

MkDown is an online markdown editor built with vueJs

Ahmad Kholid 48 Jun 15, 2021