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.

intro

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

    math

Table of Contents

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

  • TOC examples
  [TOC]
  • Show pictures

    toc

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

    plantuml

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

vue 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

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.

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.

Create a Markdown Previewer using Vue.js

Create a Markdown Previewer using Vue.js. Watch live as Gwen Faraday uses Vue.js to create a Markdown Previewer.

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?