vuetify-markdown-editor
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/katex@0.10.2/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" />
Outline mode: <Editor outline v-model="text" />
Dependencies
License
MIT License