Markdown editor using codemirror and previewer showdown for Vue.js

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

showdown-markdown-editor

A markdown editor using codemirror and previewer using showdown for Vue.js.

Demo

showdownmde demo

Markdown editor

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 100 language modes and various addons that implement more advanced editing functionality. Every language comes with fully-featured code and syntax highlighting to help with reading and editing complex code.

Markdown editor of showdown-markdown-editor, edit markdown text using vue-codemirror to access codemirror. You can find more information (and the manual) on the codemirror project page.

Markdown previewer

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

Markdown previewer of showdown-markdown-editor, preview markdown content with HTML using the showdown to converte it. For more information, refer to the following document:

Supporting some markdown extension features

LaTeX math and AsciiMath

It's supported by showdown-katex, that render LaTeX math and AsciiMath using KaTeX, You can check KaTeX supported functions/symbols.

  • Math examples

    ```asciimath
        x = (-b +- sqrt(b^2-4ac)) / (2a)
    
    
    

    x = (-b +- sqrt(b^2-4ac)) / (2a)

    
    
       x=\frac{ -b\pm\sqrt{ b^2-4ac } } {2a}
    
    
    ```text-tex-latex
    x=\frac{ -b\pm\sqrt{ b^2-4ac } } {2a}
    
  • Show pictures

Table of Contents

It's implemented sub-TOC in showdown-toc.js.

  • TOC examples
  [TOC]

  • Show pictures

Mermaid

It's implemented in showdown-mermaid.js, render diagrams of Flowchart or Sequence or Gantt using mermaid, check mermaid doc for more information.

Mermaid examples:

  • Flowchart

      ```mermaid
      graph TD;
         A-->B;
         A-->C;
         B-->D;
         C-->D;
    
    
    [![flowchart](https://raw.githubusercontent.com/jhuix/showdown-markdown-editor/master/docs/screenshot/preview-flowchart.png)](https://raw.githubusercontent.com/jhuix/showdown-markdown-editor/master/docs/screenshot/preview-flowchart.png)
    
    
  • Sequence diagram

     ```mermaid
     sequenceDiagram
         participant Alice
         participant Bob
         Alice->>John: Hello John, how are you?
         loop Healthcheck
             John->>John: Fight against hypochondria
         end
         Note right of John: Rational thoughts <br/>prevail!
         John-->>Alice: Great!
         John->>Bob: How about you?
         Bob-->>John: Jolly good!
    
    
    [![sequence](https://raw.githubusercontent.com/jhuix/showdown-markdown-editor/master/docs/screenshot/preview-sequence.png)](https://raw.githubusercontent.com/jhuix/showdown-markdown-editor/master/docs/screenshot/preview-sequence.png)
    
    
  • Gantt diagram

     ```mermaid
     gantt
     dateFormat  YYYY-MM-DD
     title Adding GANTT diagram to mermaid
     excludes weekdays 2014-01-10
    
     section A section
     Completed task            :done,    des1, 2014-01-06,2014-01-08
     Active task               :active,  des2, 2014-01-09, 3d
     Future task               :         des3, after des2, 5d
     Future task2               :         des4, after des3, 5d
    
    
    [![gantt](https://raw.githubusercontent.com/jhuix/showdown-markdown-editor/master/docs/screenshot/preview-gantt.png)](https://raw.githubusercontent.com/jhuix/showdown-markdown-editor/master/docs/screenshot/preview-gantt.png)
    
    

Plantuml

It's implemented in showdown-plantuml.js. render diagrams of uml using plantuml. To know more about PlantUML, please visit plantuml website.

  • Plantuml examples

    ```plantuml
    @startuml
    participant User
    
    User -> A: DoWork
    activate A
    
    A -> B: << createRequest >>
    activate B
    
    B -> C: DoWork
    activate C
    C --> B: WorkDone
    destroy C
    
    B --> A: RequestCreated
    deactivate B
    
    A -> User: Done
    deactivate A
    
    @enduml
    
    
    
  • Show pictures

Footnotes

It's implemented in showdown-footnotes.js, use for reference the showdown-footnotes.

  • Footnotes examples

    [^1]: The explanation.

Project setup
npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

License

MIT

Copyright (c) 2019-present, Jhuix (Hui Jin)

GitHub

jhuix/showdown-markdown-editor

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

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 is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown.

The 10 Vue markdown components below will give you a clear view.

1. Vue Showdown

Use showdown as a Vue component.

View Demo

Download Source

2. showdown-markdown-editor

A markdown editor using codemirror and previewer using showdown for Vue.js.

View Demo

Download Source

3. markdown-it-vue

The vue lib for markdown-it.

View Demo

Download Source

4. perfect-markdown

perfect-markdown is a markdown editor based on Vue & markdown-it. The core is inspired by the implementation of mavonEditor, so perfect-markdown has almost all of the functions of mavonEditor. What's more, perfect-markdown also extends some features based on mavonEditor.

View Demo

Download Source

5. v-markdown-editor

Vue.js Markdown Editor component.

View Demo

Download Source

6. markdown-to-vue-loader

Markdown to Vue component loader for Webpack.

View Demo

Download Source

7. fo-markdown-note Component for Vue.js

fo-markdown-note is a Vue.js component that provides a simple Markdown editor that can be included in your Vue.js project.

fo-markdown-note is a thin Vue.js wrapper around the SimpleMDE Markdown editor JavaScript control.

View Demo

Download Source

8. Vue-SimpleMDE

Markdown Editor component for Vue.js. Support both vue1.0 & vue2.0

View Demo

Download Source

9. mavonEditor

A nice vue.js markdown editor. Support WYSIWYG editing mode, reading mode and so on.

View Demo

Download Source

10. vue-markdown

A Powerful and Highspeed Markdown Parser for Vue.

View Demo

Download Source

Thank for read!

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" />

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

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

Emoji:

Dependencies Github

DCsunset/vuetify-markdown-editor