VueSimpleMarkdown

 

> A Simple and Highspeed Markdown Parser for Vue

Installation

``bash
npm install --save vue-simple-markdown
`

Usage

$3

`js
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)
`

$3

`html








`

$3


`

`

$3

| Prop | Type | Default | Describe |
| ---- | ---- | ------- | ------- |
| source | String | '' | The markdown source code |
| emoji | Boolean | true | :) => 😃 |
| heading | Boolean | true | # =>

, ## =>

... |
| highlight | Boolean | true | SyntaxHighlighter (highlightjs) |
| horizontal-line | Boolean | true | * or ___ or --- =>

---

|
| image | Boolean | true | !imageName.png |
| 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 => 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 |

$3

#### 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
`

$3


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

$3

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

$3

`bash
npm run dev
`

$3

`bash
npm run dev:coverage
`

$3

Bundle the js and css of to the dist folder:

`bash
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.

`bash


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