Editing and Previewing Markdown In Vue.js

Editing and Previewing Markdown In Vue.js

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

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 required to install and configure Vuetify. For installing Vuetify, please visit https://vuetifyjs.com/en/getting-started/quick-start.

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:

text-html-basic
<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 (use \\[ and \\] for formula block, and \\( and \\) for inline formula)
  • Image uploading and previewing (to use uploaded image in markdown, use the filename as the link)

Usage

This package can be used in Node.js module:

text-html-basic
<template>
  <v-app>
    <Editor
      mode="Rendered"
      ref="editor"
      hint="Test"
      nativeEmoji
      :outline="false"
      :preview="true"
      v-model="text"
      />
  </v-app>
</template>

<script>
import { Editor } from 'vuetify-markdown-editor';

export default {
  name: 'app',
  components: {
    Editor
  },
  data() {
    return {
      text: ''
    };
  },
  mounted() {
    // Access properties or methods using $refs
    this.$refs.editor.focus();
    // this.$refs.editor.upload();

    // Dark theme
    //this.$vuetify.theme.dark = true;
  }
};
</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
emoji true Enable emoji input
image true Enable image upload
hint '' Add description at the bottom
fileTarget / Image upload target uri
fileFilter file => file.type.startsWith('image') Allow only specific files. Return true to allow, false to reject

Methods

Method Description
upload() Start or resume uploading all files in list
pause() Pause uploading
resume() Resume uploading
focus() Focus on the editor

Properties

Property Description
files Get all files in list in FlowFile format

Test

Clone this repository, and then run:

npm install
npm run serve

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

Screenshots

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

This is image title

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

This is image title

Dark mode: this.$vuetify.theme.dark = true;

This is image title

Emoji:

This is image title

Dependencies

Github

DCsunset/vuetify-markdown-editor

vuejs javascript Markdown vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.

Markdown editor using codemirror and previewer showdown for Vue.js

A markdown editor using codemirror and previewer using showdown for Vue.js.Showdown is a Javascript Markdown to HTML converter, based on the original works by John Gruber. Showdown can be used client side (in the browser) or server side (with NodeJs).

Vue Markdown Editor component for Vue.js

Markdown Editor component for Vue.js. v-markdown-editor is a simple Markdown editor component for Vue wrapper codemirror

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.