# markdown-editor-vuejs

> A light markdown editor with vuejs

Latest version **1.1.1** (published 2019-07-04) · 0 weekly downloads

## Install

```sh
npm install markdown-editor-vuejs
pnpm add markdown-editor-vuejs
yarn add markdown-editor-vuejs
bun add markdown-editor-vuejs
```

## 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.1.1 |
| Published | 2019-07-04 |
| First published | 2019-07-03 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 195.8 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | mthdht |
| Keywords | markdown editor, vue js markdown editor, vue js, markdown |

## Links

- npm: https://www.npmjs.com/package/markdown-editor-vuejs
- Repository: https://github.com/mthdht/markdown-editor-vue
- Homepage: https://github.com/mthdht/markdown-editor-vue#readme
- Issues: https://github.com/mthdht/markdown-editor-vue/issues
- npm.io page: https://npm.io/package/markdown-editor-vuejs

## Dependencies (4)

- [marked](https://npm.io/package/marked.md) ^0.6.3
- [prismjs](https://npm.io/package/prismjs.md) ^1.16.0
- [babel-plugin-prismjs](https://npm.io/package/babel-plugin-prismjs.md) ^1.0.2
- [material-design-icons](https://npm.io/package/material-design-icons.md) ^3.0.1

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.1.1 (latest) — 2019-07-04
- 1.1.0 — 2019-07-04
- 1.0.21 — 2019-07-04
- 1.0.20 — 2019-07-04
- 1.0.19 — 2019-07-04
- 1.0.17 — 2019-07-04
- 1.0.16 — 2019-07-04
- 1.0.15 — 2019-07-03
- 1.0.14 — 2019-07-03
- 1.0.13 — 2019-07-03
- 1.0.12 — 2019-07-03
- 1.0.11 — 2019-07-03
- 1.0.10 — 2019-07-03
- 1.0.9 — 2019-07-03
- 1.0.8 — 2019-07-03
- … 8 more at https://npm.io/package/markdown-editor-vuejs/versions

## README

<!--
*** Thanks for checking out this README Template. If you have a suggestion that would
*** make this better please fork the repo and create a pull request or simple open
*** an issue with the tag "enhancement".
*** Thanks again! Now go create something AMAZING! :D
-->



<!-- PROJECT LOGO -->
<br />
<p align="center"><h3 align="center">Markdown-Editor-Vue</h3>

  <p align="center">
    A simple Markdown editor using VueJs
    <br />
    ·
    <a href="https://github.com/mthdht/markdown-editor-vue/issues">Report Bug</a>
    ·
    <a href="https://github.com/mthdht/markdown-editor-vue/issues">Request Feature</a>
  </p>
</p>



<!-- TABLE OF CONTENTS -->
## Table of Contents

* [About the Project](#about-the-project)
  * [Built With](#built-with)
* [Getting Started](#getting-started)
  * [Prerequisites](#prerequisites)
  * [Installation](#installation)
* [Usage](#usage)
* [Contributing](#contributing)
* [License](#license)
* [Contact](#contact)
* [Acknowledgements](#acknowledgements)



<!-- ABOUT THE PROJECT -->
## About The Project

![Markdown Editor Screen Shot](src/editor.png)

### Built With
* [Vue js](https://vuejs.org/)



<!-- GETTING STARTED -->
## Getting Started


### Prerequisites

* npm
```sh
npm install npm@latest -g
```

### Installation

1. Install NPM packages
```sh
npm install markdown-editor-vuejs
```



<!-- USAGE EXAMPLES -->
## Usage

First, you have to import the newly installed package
``` javascript
// other import
import MarkdownEditor from 'markdown-editor-vuejs'
import 'markdown-editor-vuejs/src/markdown.css' // if you want to enjoy my style :)

export default {
    // your component code
    data: function() {
        return {
            content: '' //choose whatever name you want
        }
    }
}
```

Then, you can use the component anywhere in your template:
```javascript
<template>
    <markdown-editor v-model="content"></markdown-editor>
</template>
```

> You just need to bind the v-model to some data attribute

By default, this markdown editor has teal color theme but you can change it by passing a color prop.

The colors available are: **gray** - **red** - **orange** - **yellow** - **green** - **teal** - **blue** - **indigo** - **purple** - **pink**

You can also change the basic default theme to be lighter or darker

the themes available are: **light** - **dark** - **basic**

```javascript
<markdown-editor v-model="content" color="blue" theme="dark"></markdown-editor>
```


<!-- CONTRIBUTING -->
## Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request



<!-- LICENSE -->
## License

Distributed under the MIT License. 

<!-- CONTACT -->
## Contact

Mthdht - [@mthdht](https://twitter.com/mthdht) - mthdht@gmail.com

Project Link: [https://github.com/mthdht/markdown-editor-vue](https://github.com/mthdht/markdown-editor-vue)



<!-- ACKNOWLEDGEMENTS -->
## Acknowledgements
* [Material icon](https://material.io/tools/icons/?style=baseline)
* [Prism js](https://prismjs.com/#basic-usage)
* [Marked](https://marked.js.org/#/README.md#README.md)

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