@xieyuheng/postmark-components-vue2 NPM

Postmark Components -- for Vue2

Components for rendering Postmark Nodes.

By which your can provide custom components to render your markdown extensions.

Only to be used with tailwindcss.

Demo

We have a demo page at:

https://postmark-components-vue2.vercel.app

Usage

You can copy the code in src/components to your project, and use them as the base for your highly customized markdown renderer.

You can also install this package:

npm i @xieyuheng/postmark-components-vue2

And import the components as the following:

import { components } from "@xieyuheng/postmark-components-vue2"

// Or use `require` to import and use `components` in one line:
require("@xieyuheng/postmark-components-vue2").components

A complete example (taken from cicada-lang-website):

Where the @/components/cicada-block is a custom component for rendering cicada code block.

<template>
  <md-document
    :document="state.document"
    :custom-block-components="{
      Cicada: {
        component: require('@/components/cicada-block').default,
        props: (node) => ({
          text: node.text.trim(),
          index: node.value.index,
          info: node.info,
          book: state.book,
          pageName: state.pageName,
          page: state.text,
        }),
      },
    }"
  />
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"
import { ArticleState as State } from "./article-state"

@Component({
  name: "cicada-article",
  components: {
    ...require("@xieyuheng/postmark-components-vue2").components,
  },
})
export default class extends Vue {
  @Prop() state!: State
}
</script>