A plugin for React Static that parses Markdown files to pages in your React Static app.
npm install react-static-plugin-markdown
There are three steps to complete before being able to use this plugin.
First, create a component that will render the Markdown file's page. It can use the
ContentPage component from this package to render the actual content, as long as you pass it the route data. At its bare minimum, the following would be sufficient:
Then, add the plugin to your
static.config.js, passing the path to the above render component as an option:
Finally, write your Markdown files in the
/content directory. For example,
/content/some-page.md will be visible on your website at the path
Options can be passed by using an array.
Path to the component that will render the Markdown file. See The render component for more details.
Folder in which your Markdown pages are located.
The render component
Because plugins cannot access route data, you will manually have to pass that to the render component. At the bare minimum, it looks as follows:
However, this also provides you with the opportunity to integrate that Markdown page in additional HTML. Just make sure to pass the route data on to the
You can also use this to replace the default remark-based Markdown renderer by a different renderer, simply by replacing the default
<ContentPage> element with a different element:
For a full list of the properties available to the render component, see Route data.
The original, unparsed Markdown.
The filename of the original Markdown file, e.g.
---title: Computing Machinery and Intelligence---# The Imitation GameI propose to consider the question, 'Can Machines Think?' This should...
Its data could be used by the render component as follows:
MIT © Vincent Tunru