# @voraciousdev/vue-markdown-editor

> A Markdown editor component for Vue that renders in place without the need for a preview pane. This is the component that powers [Octo](https://github.com/voraciousdev/octo).

Latest version **0.3.1** (published 2021-05-01) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @voraciousdev/vue-markdown-editor
pnpm add @voraciousdev/vue-markdown-editor
yarn add @voraciousdev/vue-markdown-editor
bun add @voraciousdev/vue-markdown-editor
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2021-05-01 |
| First published | 2020-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 4.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | voraciousdev |

## Links

- npm: https://www.npmjs.com/package/@voraciousdev/vue-markdown-editor
- npm.io page: https://npm.io/package/@voraciousdev/vue-markdown-editor

## Dependencies (7)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2
- [codemirror](https://npm.io/package/codemirror.md) ^5.59.0
- [vue-codemirror](https://npm.io/package/vue-codemirror.md) ^4.0.6
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^7.2.3
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^8.4.2

## Recent versions

- 0.3.1 (latest) — 2021-05-01
- 0.3.0 — 2021-02-08
- 0.2.1 — 2021-02-04
- 0.2.0 — 2021-01-26
- 0.1.0 — 2020-12-28
- 0.0.1 — 2020-12-28

## README

[![latest tag](https://img.shields.io/github/v/tag/voraciousdev/vue-markdown-editor?color=blue&label=latest%20tag&sort=semver)](https://github.com/voraciousdev/vue-markdown-editor/releases)
[![license](https://img.shields.io/github/license/voraciousdev/vue-markdown-editor)](https://github.com/voraciousdev/vue-markdown-editor/blob/master/LICENSE)
[![open issues](https://img.shields.io/github/issues-raw/voraciousdev/vue-markdown-editor)](https://github.com/voraciousdev/vue-markdown-editor/issues)

# vue-markdown-editor

A Markdown editor component for Vue that renders in place without the need for a preview pane. This is the component that powers [Octo](https://github.com/voraciousdev/octo).

![screenshot](https://i.imgur.com/H5NZj8Q.gif)

Check out a quick demo [on YouTube](https://youtu.be/LfhkoCAK6aA).

## Features

### Dark and Light Themes

Dark theme by default. Dynamic theme switching. 😎

### Inline Markdown Rendering

All Markdown formatting is rendered in place. This eliminates the need for a preview pane while keeping your document in plain text. Feel free to copy and paste your Markdown into or out of this editor!

### Automatic Syntax Highlighting

Code blocks are automatically highlighted based on the tagged language.

## Install and Use

### Install

```shell
npm install --save @voraciousdev/vue-markdown-editor
```

### Basic Usage

```vue
<template>
  <MarkdownEditor v-model="markdown" />
</template>

<script>
import MarkdownEditor from '@voraciousdev/vue-markdown-editor'

export default {
  name: 'App',
  components: {
    MarkdownEditor,
  },
  data() {
    return {
      markdown: '# Hello, World!'
    }
  },
}
</script>
```

### Change Themes

The optional `theme` field accepts a string of either `dark` or `light`.

```vue
<template>
  <input v-model="theme" type="radio" value="light"> light
  <input v-model="theme" type="radio" value="dark"> dark
  <MarkdownEditor v-model="markdown" :theme="theme" />
</template>

<script>
import MarkdownEditor from '@voraciousdev/vue-markdown-editor'

export default {
  name: 'App',
  components: {
    MarkdownEditor,
  },
  data() {
    return {
      markdown: '# Hello, World!',
      theme: 'light',
    }
  },
}
</script>
```

## Contribute

This library uses `yarn`.

### Install dependencies

```shell
yarn install
```

### Compile and hot-reload for development

```shell
yarn serve
```

### Compile for production

```shell
yarn build
```

### Run the unit tests

```shell
yarn test:unit
```

### Lint and fix files

```shell
yarn lint
```

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