Search code examples
reactjsmarkdownjsxmdxdocusaurus

Import and show file content in MDX code blocks

I'm using Docusaurus to build doc. Docusaurus use MDX.
I would like to show a .json file in the doc using a code block without needing to copy/past the file content.

Instead of writting this in my md doc:

Let see the content of the `helloworld.json` file :
'''json title="helloworld.json"
{
  "hello":"world"
}
'''

I would like to have a asserts/helloworld.json file and do something like:

Let see the content of the `helloworld.json` file :
'''json title="helloworld.json" from "asserts/helloworld.json"
'''
Solution

  • Following the guide here: https://docusaurus.io/docs/markdown-features/react#importing-code-snippets

    You can import code snippets as raw-text React components and add these to code blocks.