A Vue Components for rendering Postmark Nodes

by Vue.js Examples

Postmark Components — for Vue2

Components for rendering Postmark Nodes.

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

Usage

You can copy the code in 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>

Contributions

Be polite, do not bring negative emotion to others.

License

GitHub

View Github