VueSimpleMarkdown

A Simple and Highspeed Markdown Parser for Vue

Installation

npm install --save vue-simple-markdown

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueSimpleMarkdown from 'vue-simple-markdown'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-simple-markdown/dist/vue-simple-markdown.css'

Vue.use(VueSimpleMarkdown)

Browser

<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vue-simple-markdown/dist/vue-simple-markdown.css"></link>
<script src="vue-simple-markdown/dist/vue-simple-markdown.js"></script>

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vue-simple-markdown/dist/vue-simple-markdown.css"></link>
<script src="https://unpkg.com/vue-simple-markdown"></script>

Syntax

<vue-simple-markdown :source="source"></vue-simple-markdown>

Props

| Prop | Type | Default | Describe | | ---- | ---- | ------- | ------- | | source | String | '' | The markdown source code | | emoji | Boolean | true | :) => 😃 | | heading | Boolean | true | # => <h1>, ## => <h2>... | | highlight | Boolean | true | SyntaxHighlighter (highlightjs) | | horizontal-line | Boolean | true | *** or ___ or --- => <hr /> | | image | Boolean | true | ![imageName.png](imageLocation) | | inline-code | Boolean | true | `someCode` => someCode | | italic | Boolean | true | *text* or _text_ => text | | linkify | Boolean | true | Autoconvert URL-like text to link | | link | Boolean | true | [Github](https://github.com/) => Github | | lists | Boolean | true | Lists, see here | | strong | Boolean | true | **text** or __text__ => text | | blockquote | Boolean | true | Blockquotes, see here | | table | Boolean | true | Tables, see here | | prerender | Function | (source) => return { source } | Function executed before rendering process | | postrender | Function | (html) => { return html } | Function executed after rendering process |

Lists

Unordered list

Start list with characters *, + or -
Number of spaces before that character => nesting level

* First nesting level
 * Second nesting level
   * Third nesting level
          * Tenth nesting level
   * Again third nesting level

Ordered list

Start list with number and dot. At example 1.
Number of spaces before that character => nesting level

1. First nesting level
 1. Second nesting level
   1. Third nesting level
          1. Tenth nesting level
   2. Again third nesting level

Blockquotes

> First nesting level
>> Second nesting level
>>> Third nesting level
>>>>>>>>>> Tenth nesting level
>>> Again third nesting level

Tables

A table is an arrangement of data with rows and columns, consisting of a single header row, a delimiter row separating the header from the data, and zero or more data rows. Each row must start and end with pipes (|) and it consists of cells containing arbitrary text, in which inlines are parsed, separated by pipes (|). Spaces between pipes and cell content are trimmed. Block-level elements cannot be inserted in a table. Example:

| Foo | Bar |
|-----|-----|
| Bam | Baz |

| Foo | Bar | |-----|-----| | Baz | Bim |

You can use colon (:) in the delimiter row to determine content alignment of the corresponding column. Example:

| Align left | Align Right | Align Center | Default |
|:-----------|-:|:---:|--|
| Some text| Some text | Some | alignment |
| aligned to|  aligned to | text |
| the left side| the right side| in the center |

| Align left | Align Right | Align Center | Default | |:-----------|-:|:---:|--| | Some text| Some text | Some | alignment | | aligned to| aligned to | text | | the left side| the right side| in the center |

Number of columns in each row in the body of the table may vary. Example:

| Column A | Column B | Column C |
|-|-|-|
| You can have | | empty cells |
| This row | is too short |
| This row | has | too many | cells |

| Column A | Column B | Column C | |-|-|-| | You can have | | empty cells | | This row | is too short | | This row | has | too many | cells |

Development

Launch visual tests

npm run dev

Launch Karma with coverage

npm run dev:coverage

Build

Bundle the js and css of to the dist folder:

npm run build

Publishing

The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publish

License

MIT