🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A Vue.js Component for editing and previewing markdown using Vuetify.js.

Text

Documentation

vuetify-markdown-editor

npm npm GitHub

A Vue.js Component for editing and previewing markdown using Vuetify.js and command line rendering utility.

Install

npm install vuetify-markdown-editor 

Since this component is based on Vuetify, it is also required to import css from Vuetfiy and Material Design Icons. Simply add the following lines to index.html:

<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

Or you can use npm to install Vuetify or Material Design Icons and import the corresponding css from local files.

Command line utility

This package also provides a command line utility to render markdown files.

Install globally:

npm install -g vuetify-markdown-editor 

Or install locally and use npx to run:

npm install vuetify-markdown-editor npx render-cli input.md [output.html] 

Usage:

render-cli input.md [output.html] 

To use the rendered html, remember to add css files for Katex and highlight.js:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/default.min.css">

Features

  • Solo and inline mode
  • Editor-only and Editor-Preview mode
  • Code highlighting
  • Emoji picking
  • Math formula (using $ and $$)
  • (TODO) Image uploading

Usage

This package can be used in Node.js module:

<template>   <Editor ref="editor" :outline="true" :preview="true" v-model="text" /> </template>
<script> import { Editor } from 'vuetify-markdown-editor';  export default {   name: 'app',   components: {     Editor   },   data() {     return {       text: ''     };   },   mounted() {     this.$refs.editor.focus();   } }; </script>

Props

Prop Default Description
value '' String that binds to the textarea
mode 'Rendered' When set to 'Source', the preview will display html source code
outline false The border will be outlined instead of card style
color undefined The outline and icon's color
preview true Add the responsive preview
nativeEmoji false Use native emoji instead of pictures
hint '' Add description at the bottom

Test

Clone this repository, and then run:

npm install npm run serve 

Then open http://localhost:8080 in browser to test.

Screenshot

Solo mode: <Editor v-model="text" /> Screenshot

Outline mode: <Editor outline v-model="text" /> Screenshot-Outline

Emoji: Screenshot-Emoji

Dependencies

License

MIT License


You May Also Like