MDX is an authorable format that lets users write JSX in markdown documents.
Questions tagged [mdxjs]
153 questions
1
vote
0 answers
xdmOptions with remark-disable-tokenizers to disable "indented codeblock"
I'm creating a blog using Next.js + MDX-Bundler and trying to use remark-disable-tokenizers to disable "indented codeblock". But i'm not able to make it work. I found a reference here which says that we can use remark-disable-tokenizers for this…
Gangula
- 5,193
- 4
- 30
- 59
1
vote
1 answer
MDX Convert plain text URL to an anchor tag using Rehype/Remark plugins
I'm creating a blog using Next.js + MDX-Bundler and using rehype plugins to add additonal content to my .html file from .mdx. But I noticed that if I have a plain-text url, it doesn't get converted to an anchor tag. I also found a reference…
Gangula
- 5,193
- 4
- 30
- 59
1
vote
0 answers
Why is MDX with Next.JS missing IDs on my elements?
I'm mapping custom HTML to some markdown elements for my site.
For some reason, in genId, the build fails because props can be empty string/null. However, this only happens in production build and everything works perfectly locally.
I've also…
Ryan
- 1,102
- 1
- 15
- 30
1
vote
3 answers
How to create multiple node types with mdx in Gatsby?
I am trying to create multiple content types in Gatsby using mdx (instead of remark). I am having trouble sifting through old methods of handling remark and new methods with mdx. I have seen multiple instances of allXYZ root nodes being queried in…
justkeepprogramming
- 21
- 3
1
vote
1 answer
Replacing paragraph nodes with HTML nodes
Question
How can I replace a "paragraph" node to an "html" node for MDX?
Background
Replacing every "twitter.com" links to expanded Twitter embed HTML within an MDX content.
Reproducible CodeSandbox:…
dance2die
- 35,807
- 39
- 131
- 194
1
vote
1 answer
MDX not exporting/importing js files as expected
I am attempting to load a .js file into my markdown file in React using gatsby-plugin-mdx. However, I am running into an import error, which shows as a WARN as follows:
warn…
Marco Sousa
- 659
- 1
- 6
- 12
1
vote
1 answer
gatsby-plugin-mdx with rehype-autolink-headers only working with wrap option
I am trying to get my site setup with Gatsby + MDX. I am looking at the documentation here and want to make use of the autolink-header-option. I have tried using the rehype and remark plugins for this, but I can only get the Rehype plugin to work…
alex9552
- 231
- 1
- 5
1
vote
1 answer
next-mdx-remote doesn't pass the component
I'm using next-mdx-remote
in mdx file
- Use `RAND()` in
in a react component
import { MDXRemote } from 'next-mdx-remote'
import { serialize } from 'next-mdx-remote/serialize'
const content = await serialize(content, {
mdxOptions: {
…
zummon
- 906
- 3
- 9
- 27
1
vote
2 answers
How to sort posts with next-mdx-remote?
I'm working on a blog in Next.js and MDX. For this, I downloaded this repo which I'm trying to adapt. But I can't find how I can sort the posts. For now they are with alphabetical order, but I would like to sort them by date (or a custom sort). How…
JulSeb42
- 393
- 3
- 12
1
vote
1 answer
storybook: Using argtypes in mdx does not have control
I edit my storybook with .mdx, but something wrong!
My code is as follows：
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import Badge from '../components/Badge';
leesgithub2019
- 93
- 1
- 2
- 5
1
vote
1 answer
VS Code shows 'JSX element type 'MdxBlogPost' does not have any construct or call signatures.ts(2604)' when importing an MDX file in NextJS
I want to setup a website with NextJS, TypeScript and mdx-js. I used yarn create next-app to setup the project, then added typescript and mdx-js. I created a simple MDX file and imported it in index.tsx. When I run yarn dev, the projects builds just…
feO2x
- 5,358
- 2
- 37
- 46
1
vote
0 answers
Loading Static Files at Runtime with Create React App
I have a simple Create React App that loads a bunch of static markdown content at runtime and applies an mdx-loader to that content to replace any react components found in the markdown.
export default function Page() {
const { pathname } =…
Tabbyofjudah
- 1,973
- 3
- 17
- 29
1
vote
2 answers
Shadowing/Customizing parent theme's plugin in Gatsby
I am using the Gatsby theme @lekoarts/gatsby-theme-minimal-blog for my own blog. The theme also has a parent core theme @lekoarts/gatsby-theme-minimal-blog-core which is making use of the gatsby-plugin-mdx plugin.
In my own blog I'd like to change…
kuzdogan
- 554
- 7
- 13
1
vote
1 answer
How to provide scope and custom components to netlify-cms-widget-mdx
I've set up a Gatsby blog using Netlify CMS and added netlify-cms-widget-mdx to support .mdx files. I have some custom components that I've passed to the MDXProvider to make them globally available to all of my .mdx files without the need to import…
garrowj
- 23
- 1
- 5
1
vote
1 answer
Using Gatsby Link to navigate to MDX rendered pages
I am looking to Link to blog posts.
import React from "react";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { Link, Button } from "gatsby";
import Image from "gatsby-image";
import { navigate } from…
Andrew Carrigan
- 25
- 3