A Simple and Highspeed Markdown Parser for Vue
Clone or download
Latest commit 09abdb8 Oct 25, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Webpack - exclude node_modules Aug 16, 2017
src Improved link and img regex. Switched to yarn Oct 25, 2018
test Markdown implemented Aug 15, 2017
.babelrc Initial commit Aug 15, 2017
.editorconfig Initial commit Aug 15, 2017
.eslintignore Initial commit Aug 15, 2017
.eslintrc.js Initial commit Aug 15, 2017
.gitignore Initial commit Aug 15, 2017
.stylelintrc Initial commit Aug 15, 2017
CONTRIBUTING.md Initial commit Aug 15, 2017
LICENSE Initial commit Aug 15, 2017
README.md Fix character typo in README.md Sep 11, 2017
package.json 1.0.8 Oct 25, 2018
yarn.lock Improved link and img regex. Switched to yarn Oct 25, 2018

README.md

VueSimpleMarkdown

npm vue2

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

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