https://github.com/hamlim/inline-mdx.macro

A babel-macro for transforming mdx inline
https://github.com/hamlim/inline-mdx.macro

babel-plugin-macros mdx

Last synced: 20 days ago
JSON representation

A babel-macro for transforming mdx inline

• Host: GitHub
• URL: https://github.com/hamlim/inline-mdx.macro
• Owner: hamlim
• Created: 2018-07-26T01:01:35.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T01:23:36.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T20:19:33.418Z (about 1 month ago)
• Topics: babel-plugin-macros, mdx
• Language: JavaScript
• Homepage:
• Size: 1.29 MB
• Stars: 95
• Watchers: 3
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

• awesome-list - inline-mdx.macro - macro for transforming mdx inline | hamlim | 89 | (JavaScript)

README

        
# `inline-mdx.macro`

[![Babel Macro](https://img.shields.io/badge/babel--macro-%F0%9F%8E%A3-f5da55.svg?style=flat-square)](https://github.com/kentcdodds/babel-plugin-macros)

[![npm version](https://img.shields.io/badge/npm-1.0.0-brightgreen.svg)](https://github.com/hamlim/inline-mdx.macro)

A babel-macro for converting mdx into an inline component.

```js

/** @jsx mdx */

import { mdx } from '@mdx-js/react'

import { inline } from 'inline-mdx.macro'

const SomeMDXComponent = inline`

## This is some MDX source

~~strikethrough~~

`

```

generates...

```js

/** @jsx mdx */

import { mdx } from '@mdx-js/react'

const SomeMDXComponent = ...;

// you can now do 

```

## ⚠️ Important! ⚠️

You must add the following to any file using the `inline` macro:

```js

/** @jsx mdx */

import { mdx } from '@mdx-js/react'

```

This ensures mdx picks up on the jsx code and renders it correctly.

## Changes from v0 to v1:

- Updated to MDX v1

- Removed the `import` macro

- Template strings are now formatted first using the

  [dedent](https://github.com/dmnd/dedent) library