• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

miaolz123/vue-markdown: A Powerful and Highspeed Markdown Parser for Vue

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

miaolz123/vue-markdown

开源软件地址(OpenSource Url):

https://github.com/miaolz123/vue-markdown

开源编程语言(OpenSource Language):

JavaScript 45.7%

开源软件介绍(OpenSource Introduction):

vue-markdown

npm npm npm

If you want vue-markdown for vue1.X.X, please checkout vue-markdown1.X.X.

A Powerful and Highspeed Markdown Parser for Vue.

Quick start: <vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>

Supported Markdown Syntax:

  • automatic table of contents
  • table & class customize
  • *SyntaxHighlighter
  • definition list
  • strikethrough
  • GFM task list
  • abbreviation
  • superscript
  • subscript
  • footnote
  • insert
  • *katex
  • emoji
  • mark

*SyntaxHighlighter work with Prism recommend

*katex need add katex css.

Example

simple

webpack-simple

Live Demo

Installation

Browser globals

The dist folder contains vue-markdown.js with the component exported in the window.VueMarkdown object.

<body>
  <vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>
</body>
<script src="path/to/vue.js"></script>
<script src="path/to/vue-markdown.js"></script>
<script>
    Vue.use(VueMarkdown);
    var vm = new Vue({
        el: "body"
    });
</script>

NPM

$ npm install --save vue-markdown

Yarn

$ yarn add vue-markdown --save

CommonJS

var VueMarkdown = require('vue-markdown');

new Vue({
  components: {
    'vue-markdown': VueMarkdown
  }
})

ES6 (Vue-CLI users)

After installing via Yarn or NPM, use the following snippet in the script portion of the Vue component which you wish to render the Markdown.

import VueMarkdown from 'vue-markdown'

new Vue({
  components: {
    VueMarkdown
  }
})

Slots

<vue-markdown>this is the default slot</vue-markdown>

After setting up the middleware in your vue component above, using the embedded markdown is as easy as writing it between the vue-markdown tags.

VueMarkdown has a default slot which is used to write the markdown source.

TIP: The default slot only renders once at the beginning, and it will overwrite the prop of source!

Props

Prop Type Default Describe
watches Array ["source", "show", "toc"] HTML refresh automatically when the prop in this array changed
source String null the markdown source code
show Boolean true enable render to the default slot automatically
html Boolean true enable HTML syntax in source
xhtml-out Boolean true <br></br> => <br />
breaks Boolean true \n => <br>
linkify Boolean true autoconvert URL-like text to link
emoji Boolean true :) =>

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap