https://github.com/tb/react-static-markdown

Markdown files utils for react-static
https://github.com/tb/react-static-markdown

markdown react react-static

Last synced: 7 months ago
JSON representation

Markdown files utils for react-static

• Host: GitHub
• URL: https://github.com/tb/react-static-markdown
• Owner: tb
• License: mit
• Created: 2018-03-04T20:43:52.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-08T20:00:51.000Z (almost 8 years ago)
• Last Synced: 2025-04-12T16:55:22.252Z (10 months ago)
• Topics: markdown, react, react-static
• Language: JavaScript
• Size: 82 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# [react-static-markdown](https://github.com/tb/react-static-markdown)

[![Build Status](https://travis-ci.org/tb/react-static-markdown.svg?branch=master)](https://travis-ci.org/tb/react-static-markdown)

[![npm version](https://badge.fury.io/js/react-static-markdown.svg)](http://badge.fury.io/js/react-static-markdown)

Markdown files utils for [react-static](https://github.com/nozzle/react-static)

## Install

    yarn add -D globby gray-matter mdxc mdx-loader

    yarn add react react-static-markdown 

## Example usage with mdx-loader

static.config.js

    webpack: (config, {defaultLoaders, stage}) => {

      config.resolve.extensions.push('.md');

      config.module.rules = [

        {

          oneOf: [

            {

              test: /\.md$/,

              use: ['mdx-loader'],

            },

            defaultLoaders.cssLoader,

            defaultLoaders.jsLoader,

            defaultLoaders.fileLoader,

          ],

        },

      ];

      return config;

    },

Usage

    import About from 'content/pages/about.md';

    

    ...

    

## Example usage without mdx-loader

Markdown is transformed to mdx js code string during `getRoutes` and then evaluated to component.

static.config.js

    const getFiles = require('react-static-mdx/getFilesWithMdx');

    

    ...

    

    const pages = await getFiles('content/pages/*.md');

Usage

    import mdxToComponent from 'react-static-mdx/mdxToComponent';

    

    ...

    

    const Page = mdxToComponent(page.contentmdx);

    

    ...

    

    

## License

React Static uses the MIT license. For more information on this license, [click here](https://github.com/tb/react-static-markdown/blob/master/LICENSE).