ss-simple-markdown

A Simple and Highspeed Markdown Parser for Vue in whatsapp style
624 82
Install
npm install ss-simple-markdown
Latest Version:1.0.23
Vue:2
Last Updated:Jan 4, 2023
Links: GitHub  ·  npm
Maintainer: paulcozma

SSSimpleMarkdown

npm vue2

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 ![imageName.png](https://raw.githubusercontent.com/Vivify-Ideas/vue-simple-markdown/HEAD/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

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