The Vue Lib for Markdown-it.

The Vue Lib for Markdown-it.

The vue lib for markdown-it.

markdown-it-vue

The vue lib for markdown-it.

Install
npm install markdown-it-vue
Supports
  • Official markdown syntax.
  • GFM TOC
  • GFM style
  • emoji
  • mermaid charts
  • Echarts
  • Flowcharts.js
  • Subscript/Superscript
  • AsciiMath
  • info | error | warning message tip
Plugin list
  • markdown-it
  • markdown-it-emoji
  • markdown-it-sub
  • markdown-it-sup
  • markdown-it-footnote
  • markdown-it-deflist
  • markdown-it-abbr
  • markdown-it-ins
  • markdown-it-mark
  • markdown-it-katex
  • markdown-it-task-lists
  • markdown-it-icons
  • markdown-it-highlight
  • markdown-it-latex
  • markdown-it-container
  • markdown-it-github-toc
  • markdown-it-source-map
  • markdown-it-link-attributes

internal plugin list:

  • markdown-it-plugin-echarts
  • markdown-it-plugin-mermaid
  • markdown-it-plugin-flowchart
Options

use options property to sepcial the options of markdow-it and markdown-it-plugins.

<markdown-it-vue class="md-body" :content="content" :options="options" />
options: {
  markdownIt: {
    linkify: true
  },
  linkAttributes: {
    attrs: {
      target: '_blank',
      rel: 'noopener'
    }
  }
}

more markdown-it options see https://markdown-it.github.io/markdown-it/.

amd default plugins options:

{
  linkAttributes: {
    attrs: {
      target: '_blank',
      rel: 'noopener'
    }
  },
  katex: {
    throwOnError: false,
    errorColor: '#cc0000'
  },
  icons: 'font-awesome',
  githubToc: {
    tocFirstLevel: 2,
    tocLastLevel: 3,
    tocClassName: 'toc',
    anchorLinkSymbol: '',
    anchorLinkSpace: false,
    anchorClassName: 'anchor',
    anchorLinkSymbolClassName: 'octicon octicon-link'
  }
}
More plugins

it can add your plugin to markdown-it-vue by the use method.

this.$refs.myMarkdownItVue.use(MyMarkdownItPlugin)
Usage
<template>
  <div>
    <markdown-it-vue class="md-body" :content="content" />
  </div>
</template>

<script>
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
export default {
  components: {
    MarkdownItVue
  },
  data() {
    return {
      content: '# your markdown content'
    }
  }
}
</script>
Download

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

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!

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

10 Best Vue Icon Component For Your Vue.js App

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Icons are the vital element of the user interface of the product enabling successful and effective interaction with it. In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

1. Animated SweetAlert Icons for Vue

A clean and simple Vue wrapper for SweetAlert's fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2

Demo: https://vue-sweetalert-icons.netlify.com/

Download: https://github.com/JorgenVatle/vue-sweetalert-icons/archive/master.zip

2. vue-svg-transition

Create 2-state, SVG-powered animated icons.

Demo: https://codesandbox.io/s/6v20q76xwr

Download: https://github.com/kai-oswald/vue-svg-transition/archive/master.zip

3. Vue-Awesome

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.

Demo: https://justineo.github.io/vue-awesome/demo/

Download: https://github.com/Justineo/vue-awesome/archive/master.zip

4. vue-transitioning-result-icon

Transitioning Result Icon for Vue.js

A scalable result icon (SVG) that transitions the state change, that is the SVG shape change is transitioned as well as the color. Demonstration can be found here.

A transitioning (color and SVG) result icon (error or success) for Vue.

Demo: https://transitioning-result-icon.dexmo-hq.com/

Download: https://github.com/dexmo007/vue-transitioning-result-icon/archive/master.zip

5. vue-zondicons

Easily add Zondicon icons to your vue web project.

Demo: http://www.zondicons.com/icons.html

Download: https://github.com/TerryMooreII/vue-zondicons/archive/master.zip

6. vicon

Vicon is an simple iconfont componenet for vue.

iconfont
iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.

Download: https://github.com/Lt0/vicon/archive/master.zip

7. vue-svgicon

A tool to create svg icon components. (vue 2.x)

Demo: https://mmf-fe.github.io/vue-svgicon/v3/

Download: https://github.com/MMF-FE/vue-svgicon/archive/master.zip

8. vue-material-design-icons

This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier.

Demo: https://gitlab.com/robcresswell/vue-material-design-icons

Download: https://gitlab.com/robcresswell/vue-material-design-icons/tree/master

9. vue-ionicons

Vue Icon Set Components from Ionic Team

Design Icons, sourced from the Ionicons project.

Demo: https://mazipan.github.io/vue-ionicons/

Download: https://github.com/mazipan/vue-ionicons/archive/master.zip

10. vue-ico

Dead easy, Google Material Icons for Vue.

This package's aim is to get icons into your Vue.js project as quick as possible, at the cost of all the bells and whistles.

Demo: https://material.io/resources/icons/?style=baseline

Download: https://github.com/paulcollett/vue-ico/archive/master.zip

I hope you like them!