markduckjs

markduck

Render markdown with your Vue components.

Installation

$ npm install markduckjs
or
$ yarn add markduckjs

Usage

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

<script>
import Markduck from 'markduckjs';

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 { emojify } from 'node-emoji';

export default {
  data() {
    return {
      markdown: '# your markdown'
    };
  },
  components: {
    markduck: (() => {
      return Markduck({
        textFilter(text) {
          return emojify(text);
        },
        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

{}

textFilter

Mutate text node

type

(text: string) => string;

default

undefined

Demo

Clone and run:

npm run demo

Changelog

0.0.4 (2019-12-21)

Features

• add text filter (6cf488d)

BREAKING CHANGES

• 🧨 change interface of options