https://github.com/weyert/mdx.macro
https://github.com/weyert/mdx.macro
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/weyert/mdx.macro
- Owner: weyert
- Created: 2019-01-02T20:42:43.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-04T17:36:08.000Z (about 7 years ago)
- Last Synced: 2025-03-29T09:33:49.081Z (10 months ago)
- Language: JavaScript
- Size: 54.7 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list - mdx.macro
README
# `mdx.macro`
[](https://github.com/kentcdodds/babel-plugin-macros)
[](https://github.com/weyert/mdx.macro)
A babel-macro for converting mdx into an inline component.
```markdown
## This is some MDX source
~~strikethrough~~
```
```js
import { mdx, imports } from 'mdx.macro'
import { MDXTag } from '@mdx-js/tag'
imports() // copies import statements from markdown file to here
const SomeMDXComponent = mdx('./markdown.md')
```
generates...
```js
const SomeMDXComponent = ({ components, ...props }) => (
{`This is some MDX source`}{' '}
{' '}
{`strikethrough`}
)
```
### Getting started
#### Set up an application
Recommended setup - set up an application from scratch
[yarn](https://yarnpkg.com/en/docs/cli/) or [npm](https://docs.npmjs.com/cli/install) can be used
create a package.json file
```
npm init
yarn init
```
install webpack and webpack-cli as dev dependencies
```
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin -D
```
add to package.json
```
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
```
install and save react and react-dom
```
npm i react react-dom
yarn add react react-dom
```
install and save the following dev dependencies
```
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react -D
yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react -D
```
create a [webpack](https://webpack.js.org/guides/getting-started/#using-a-configuration) config. Example of a basic webpack config file:
```
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [htmlPlugin]
};
```
create a .babelrc file and add the following presets
```
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
```
#### Install and save the following dev dependencies
```
npm i @innerfuse/mdx.macro babel-plugin-macros @mdx-js/tag -D
yarn add @innerfuse/mdx-macro babel-plugin-macros @mdx-js/tag -D
```
#### Add [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md) to your babel config file
```
"plugins": [
"babel-plugin-macros"
]
```
### Known Problems
If you use a React component which is not defined in the Javascript file and is not imported the application will stop working and you will get an error similar to `__jsxFilename not defined`. If this is the case ensure you have the component referred in the Markdown file is defined.