Created
February 28, 2022 23:52
-
-
Save ahollenbach/2d0b2e3df49b0e5e763a4c79dc8ef60a to your computer and use it in GitHub Desktop.
An example custom MDXProvider with TailwindCSS styling
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { MDXProvider } from "@mdx-js/react"; | |
| import Image from "next/image"; | |
| const H1 = (props) => ( | |
| <h1 className="text-4xl font-bold mt-6 mb-4">{props.children}</h1> | |
| ); | |
| const H2 = (props) => ( | |
| <h2 className="text-2xl font-bold mt-6 mb-4">{props.children}</h2> | |
| ); | |
| const H3 = (props) => <h3 className="text-lg mt-6 mb-4">{props.children}</h3>; | |
| const P = (props) => <p className="my-4">{props.children}</p>; | |
| const Code = (props) => ( | |
| <code className="font-mono rounded-sm px-1 inline-flex bg-stone-200 text-sm"> | |
| {props.children} | |
| </code> | |
| ); | |
| const CodeBlock = (props) => ( | |
| <pre className="flex w-full my-4 rounded-sm bg-stone-200"> | |
| {props.children} | |
| </pre> | |
| ); | |
| const UnorderedList = (props) => ( | |
| // See your-styles.css for why markdown-list needs to be added | |
| <ul className="my-4 ml-2 sm:ml-4 list-disc list-outside markdown-list"> | |
| {props.children} | |
| </ul> | |
| ); | |
| const OrderedList = (props) => ( | |
| // See your-styles.css for why markdown-list needs to be added | |
| <ol className="my-4 ml-2 sm:ml-4 list-decimal list-outside markdown-list"> | |
| {props.children} | |
| </ol> | |
| ); | |
| const ListItem = (props) => <li className="ml-6">{props.children}</li>; | |
| const Href = (props) => { | |
| // Little hack to route in-page links locally | |
| const options = { | |
| ...(props.href.startsWith("#") || props.href.startsWith("/") | |
| ? {} | |
| : { target: "_blank" }), | |
| }; | |
| return ( | |
| <a {...options} {...props}> | |
| {props.children} | |
| </a> | |
| ); | |
| }; | |
| const BlockQuote = (props) => ( | |
| // See your-styles.css for why markdown-list needs to be added | |
| <blockquote className="my-4 text-stone-600 pl-6 border-l-4 border-l-stone-300 markdown-blockquote"> | |
| {props.children} | |
| </blockquote> | |
| ); | |
| const components = { | |
| h1: H1, | |
| h2: H2, | |
| h3: H3, | |
| p: P, | |
| pre: CodeBlock, | |
| code: Code, | |
| ul: UnorderedList, | |
| ol: OrderedList, | |
| li: ListItem, | |
| a: Href, | |
| blockquote: BlockQuote, | |
| }; | |
| export default function CustomMDXProvider(props) { | |
| return <MDXProvider components={components}>{props.children}</MDXProvider>; | |
| } | |
| // your-styles.css | |
| // | |
| // /* Manual markdown CSS due to lack of control of children components in mdx: https://github.com/mdx-js/mdx/discussions/1510 */ | |
| // .markdown-blockquote p { | |
| // margin: 0; | |
| // } | |
| // li > .markdown-list { | |
| // margin: 0; | |
| // } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment