# ss-simple-markdown

> A Simple and Highspeed Markdown Parser for Vue in whatsapp style

Latest version **1.0.23** (published 2020-04-22) · 0 weekly downloads

## Install

```sh
npm install ss-simple-markdown
pnpm add ss-simple-markdown
yarn add ss-simple-markdown
bun add ss-simple-markdown
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.23 |
| Published | 2020-04-22 |
| First published | 2019-03-21 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 82 |
| Maintainers | paulcozma |

## Links

- npm: https://www.npmjs.com/package/ss-simple-markdown
- Repository: https://github.com/Vivify-Ideas/vue-simple-markdown
- Homepage: https://github.com/Vivify-Ideas/vue-simple-markdown#readme
- Issues: https://github.com/Vivify-Ideas/vue-simple-markdown/issues
- npm.io page: https://npm.io/package/ss-simple-markdown

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [node-emoji](https://npm.io/package/node-emoji.md) ^1.8.1
- [twitter-text](https://npm.io/package/twitter-text.md) ^3.1.0
- [github-markdown-css](https://npm.io/package/github-markdown-css.md) ^2.8.0

## Recent versions

- 1.0.23 (latest) — 2020-04-22
- 1.0.22 — 2020-04-22
- 1.0.21 — 2020-04-22
- 1.0.20 — 2019-07-10
- 1.0.19 — 2019-05-29
- 1.0.18 — 2019-05-29
- 1.0.17 — 2019-05-29
- 1.0.16 — 2019-05-29
- 1.0.15 — 2019-05-24
- 1.0.14 — 2019-03-25
- 1.0.13 — 2019-03-25
- 1.0.12 — 2019-03-22
- 1.0.11 — 2019-03-22
- 1.0.10 — 2019-03-22
- 1.0.9 — 2019-03-22
- … 9 more at https://npm.io/package/ss-simple-markdown/versions

## README

# SSSimpleMarkdown

[![npm](https://img.shields.io/npm/v/ss-simple-markdown.svg)](https://www.npmjs.com/package/ss-simple-markdown) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

> A Simple and Highspeed Markdown Parser for Vue

## Installation

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

## Usage

### Bundler (Webpack, Rollup)

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

```html
<!-- 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](https://www.npmjs.com/package/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](https://github.com/) |
| lists | Boolean | `true` | Lists, see [here](#lists) |
| strong | Boolean | `true` | `**text**` or `__text__` => __text__ |
| blockquote | Boolean | `true` | Blockquotes, see [here](#blockquotes) |
| 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

```bash
npm run dev
```

### Launch Karma with coverage

```bash
npm run dev:coverage
```

### Build

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](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/ss-simple-markdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._