@voraciousdev/vue-markdown-editor

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.

Check out a quick demo on YouTube.

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

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

Basic Usage

<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.

<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

yarn install

Compile and hot-reload for development

yarn serve

Compile for production

yarn build

Run the unit tests

yarn test:unit

Lint and fix files

yarn lint