Remark Codesandbox

Overview

The remark-codesandbox plugin allows users to easily create CodeSandbox URLs directly from code blocks in markdown. This plugin supports 3 different modes: meta, iframe, and button, and does not require users to create additional folders or package.json files. It is highly customizable, supports various platforms like MDX, Gatsby, Storybook Docs, and allows users to bring in custom templates.

Features

• Directly create CodeSandbox urls from code blocks
• Supports 3 different modes: meta, iframe, and button
• No need to create additional folders or package.json file
• Supports MDX, Gatsby, Storybook Docs, docz, etc…
• Supports bringing your own custom templates
• One line setup, highly customizable
• Great for library authors to demonstrate usages directly from documentation

Installation

To install the remark-codesandbox plugin, follow these steps:

1. Import remark-codesandbox to your remark plugins.
2. For remarkMDX, include the plugin.

npm install remark-codesandbox

3. For Gatsby (using gatsby-plugin-mdx), include the plugin.
4. Use the /gatsby endpoint for Gatsby’s version of the plugin.
5. For Gatsby (using gatsby-transformer-remark), include the plugin.
6. Use the /gatsby endpoint for Gatsby’s version of the plugin.
7. For Storybook docs, follow the provided documentation.

Summary

The remark-codesandbox plugin simplifies the process of creating CodeSandbox URLs directly from code blocks in markdown. With support for various modes, platforms, and custom templates, this plugin offers users an easy and customizable way to enhance their documentation and demonstrate code usage effectively.