A powerful markdown components for Vue

A powerful markdown components for Vue

A Powerful Markdown Parser for Vue.js.The vue lib for markdown-it.<markdown-it-vue class="md-body" :content="content"/> </div> </template> <script> import MarkdownItVue from

The vue lib for markdown-it.

Demo online

http://www.aqcoder.com/markdown

Install

source-shell
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.

text-html-basic
<markdown-it-vue class="md-body" :content="content" :options="options" />
source-js
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:

source-js
{
  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.

source-js
this.$refs.myMarkdownItVue.use(MyMarkdownItPlugin)

Usage

text-html-vue
<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>

ScreenShot

markdown-it-vue

License

MIT

Github

ravenq/markdown-it-vue

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.

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.

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