ss-simple-markdown
SSSimpleMarkdown
A Simple and Highspeed Markdown Parser for Vue
Installation
npm install --save ss-simple-markdown
Usage
Bundler (Webpack, Rollup)
import Vue from 'vue'
import SSSimpleMarkdown from 'ss-simple-markdown'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'ss-simple-markdown/dist/ss-simple-markdown.css'
Vue.use(SSSimpleMarkdown)
Browser
<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="ss-simple-markdown/dist/ss-simple-markdown.css"></link>
<script src="ss-simple-markdown/dist/ss-simple-markdown.js"></script>
<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/ss-simple-markdown/dist/ss-simple-markdown.css"></link>
<script src="https://unpkg.com/ss-simple-markdown"></script>
Syntax
<ss-simple-markdown :source="source"></ss-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 |
 |
| 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
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 1.0.23 | ^2.6.10 | ||
| 1.0.22 | ^2.6.10 | ||
| 1.0.21 | ^2.6.10 | MIT | |
| 1.0.20 | ^2.6.10 | MIT | |
| 1.0.19 | ^2.6.10 | MIT | |
| 1.0.18 | ^2.6.10 | MIT | |
| 1.0.17 | ^2.6.10 | MIT | |
| 1.0.16 | ^2.6.10 | MIT | |
| 1.0.15 | ^2.6.10 | MIT | |
| 1.0.14 | ^2.3.0 | MIT | |
| 1.0.13 | ^2.3.0 | MIT | |
| 1.0.12 | ^2.3.0 | MIT | |
| 1.0.11 | ^2.3.0 | MIT | |
| 1.0.10 | ^2.3.0 | MIT | |
| 1.0.9 | ^2.3.0 | MIT | |
| 1.0.8 | ^2.3.0 | MIT | |
| 1.0.7 | ^2.3.0 | MIT | |
| 1.0.6 | ^2.3.0 | MIT | |
| 1.0.5 | ^2.3.0 | MIT | |
| 1.0.4 | ^2.3.0 | MIT | |
| 1.0.3 | ^2.3.0 | MIT | |
| 1.0.2 | ^2.3.0 | MIT | |
| 1.0.1 | ^2.3.0 | MIT | |
| 1.0.0 | ^2.3.0 | MIT |