vue-directive-markdown

    1.2.1 • Public • Published

    Build Status

    npm version

    vue-directive-markdown

    Simple Vue 2.0 directive to parse markdown using the markdown-it parser.

    Installation

    $ npm install vue-directive-markdown --save-dev

    Initialization

    Sample main.js:

    import Vue from 'vue'
    import App from './App.vue'
     
    import VueDirectiveMarkdown from 'vue-directive-markdown'
    Vue.directive('md', VueDirectiveMarkdown)
     
    new Vue({
      el: '#app',
      render: h => h(App)
    })

    Usage

    <div v-md>
    # Your Markdown Text
     
    - List item 1
    - List item 2
    - List item 3
    </div>

    Modifiers

    • v-md.html: Allow HTML. Default: false

    • v-md.xhtmlOut: Use '/' to close single tags. This is only for full CommonMark compatibility. Default: false

    • v-md.breaks: Convert '\n' in paragraphs into html breaks. Default: false

    • v-md.linkify: Autoconvert URL-like text to links. Default: false

    Set modifiers to turn on features. For example:

    <div v-md.html.linkify>
      <b>This will display HTML</b><br>
      <a href="">And automatically display links</a>
    </div>

    Syntax extensions

    The following extensions are enabled by default:

    To run without any extensions enabled and have a vanilla markdown-it parser, add the min argument:

    <div v-md:min>
     # Plain markdown-it 
    </div>

    Build

    # Build example 
     
    npm run build
     
    # Build distribution 
     
    npm run dist

    View example

    $ npm run server

    TODO

    • Configurable syntax extensions

    Install

    npm i vue-directive-markdown

    DownloadsWeekly Downloads

    6

    Version

    1.2.1

    License

    MIT

    Last publish

    Collaborators

    • cschweda