markduckjs

markduck

Render markdown with your Vue components.

Installation

$ npm install markduckjs
or
$ yarn add markduckjs

Usage

<template>
  <markduck :markdown="markdown"/>
</template>

<script>
import UnorderedList from '/your/custom/components/UnorderedList.vue';
import ListItem from '/your/custom/components/ListItem.vue';
import FigureImage from '/your/custom/components/FigureImage.vue';

import gemojiToEmoji from 'remark-gemoji-to-emoji';

export default {
  data() {
    return {
      markdown: '# your markdown'
    };
  },
  components: {
    markduck: (() => {
      return Markduck({
        remarkPlugins: [gemojiToEmoji],
        components: {
          ul: UnorderedList, // register your components!
          li: ListItem,
          img: (vdom, parent) => { // you can register it via function
            if (vdom.properties.attributes.alt) {
              return FigureImage;
            }
            return undefined;
          },
        },
      });
    })(),
  },
};

Options

components

Register Vue components corresponding to each HTML element.

type

Object

type ComponentRegisterFunc = (node: VNode, parentNode?: VNode) => VueConstructor<Vue> | undefined;

type ComponentRegisterOption = {
  [keyof: string]: VueConstructor<Vue> | ComponentRegisterFunc;
};

default

{}

remarkPlugins

Remark plugins.
A part of lists is here 👉 github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins

type

Array of Plugin or { plugin: Plugin, config: Settings }
(Plugin and Settings are from Unified.)

default

[]

Demo

Clone and run:

npm run demo

Changelog

0.0.5 (2019-12-21)

Features

• can insert remark plugins (8050099)

BREAKING CHANGES

• 🧨 textFilter is removed