Neutered Paranoid Meerkat

    This package has been deprecated

    Author message:

    Further versions are released as 'vite-plugin-markdown'

    vite-plugin-frontmatter-markdown
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-beta.9 • Public • Published

    vite-plugin-frontmatter-markdown

    npm

    A plugin enables you to import a Markdown file as various formats on your vite project.

    Setup

    npx i -D vite-plugin-frontmatter-markdown
    

    Config

    const fmPlugin = require('vite-plugin-frontmatter-markdown')
     
    module.exports = {
      plugins: [fmPlugin(options)]
    }

    Options

    mode?: ('html' | 'toc' | 'react' | 'vue')[]
    markdown?: (body: string) => string
    markdownIt?: MarkdownIt | MarkdownIt.Options

    Enum for mode is provided as Mode

    import { Mode } from 'vite-plugin-frontmatter-markdown'
     
    console.log(Mode.HTML) //=> 'html'
    console.log(Mode.TOC) //=> 'toc'
    console.log(Mode.REACT) //=> 'react'
    console.log(Mode.VUE) //=> 'vue'

    Mode examples:

    Import Front Matter attributes

    ---
    title: Awesome Title
    description: Describe this awesome content
    tags:
      - "great"
      - "awesome"
      - "rad"
    ---
     
    # This is awesome
     
    Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.
    import { attributes } from './contents/the-doc.md';
     
    console.log(attributes) //=> { title: 'Awesome Title', description: 'Describe this awesome content', tags: ['great', 'awesome', 'rad'] }

    Import compiled HTML (Mode.HTML)

    # This is awesome
     
    Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.
    import { html } from './contents/the-doc.md';
     
    console.log(html) //=> "<h1>This is awesome</h1><p>ite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.</p>"

    Import ToC metadata (Mode.TOC)

    # vite
     
    Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.
     
    ## Status
     
    ## Getting Started
     
    # Notes
    import { toc } from './contents/the-doc.md'
     
    console.log(toc) //=> [{ level: '1', content: 'vite' }, { level: '2', content: 'Status' }, { level: '2', content: 'Getting Started' }, { level: '1', content: 'Notes' },]

    Import as a React component (Mode.REACT)

    import React from 'react'
    import { ReactComponent } from './contents/the-doc.md'
     
    function MyReactApp() {
      return (
        <div>
          <ReactComponent />
        </div>
    }
    Custom Element on a markdown file can be runnable as a React component as well
    # This is awesome
     
    Vite is <MyComponent type={'react'}>
    import React from 'react'
    import { ReactComponent } from './contents/the-doc.md'
    import { MyComponent } from './my-component'
     
    function MyReactApp() {
      return (
        <div>
          <ReactComponent my-component={MyComponent} />
        </div>
    }

    MyComponent on markdown perform as a React component.

    Import as a Vue component (Mode.VUE)

    <template>
      <article>
        <markdown-content />
      </article>
    </template>
     
    <script>
    import { VueComponent } from './contents/the-doc.md'
     
    export default {
      components: {
        MarkdownContent: VueComponent
      }
    };
    </script>
    Custom Element on a markdown file can be runnable as a Vue component as well
    # This is awesome
     
    Vite is <MyComponent :type="'vue'">
    <template>
      <article>
        <markdown-content />
      </article>
    </template>
     
    <script>
    import { VueComponent } from './contents/the-doc.md'
    import MyComponent from './my-component.vue'
     
    export default {
      components: {
        MarkdownContent: {
          extends: VueComponent,
          components: { MyComponent }
        }
      }
    };
    </script>

    MyComponent on markdown perform as a Vue component.

    License

    MIT

    Install

    npm i vite-plugin-frontmatter-markdown

    DownloadsWeekly Downloads

    1

    Version

    1.0.0-beta.9

    License

    MIT

    Unpacked Size

    18.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • hmsk