Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gridsome-plugin-remark-codesandbox with all npm packages installed. Try it out:

var gridsomePluginRemarkCodesandbox = require("gridsome-plugin-remark-codesandbox")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gridsome-plugin-remark-codesandbox v0.4.2

This plugin will allow you to add a codesandbox embed link to your markdown files

Gridsome Plugin Remark CodeSandbox

Gridsome Plugin Remark CodeSandbox

This ia plugin for Gridsome's markdown engine Remark and it allows you to embed a CodeSandbox in your markdown files.

Installation

npm install gridsome-plugin-remark-codesandbox

How to use

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        route: '/blog/:year/:month/:day/:slug',
        remark: {
          plugins: [
            [ 'gridsome-plugin-remark-codesandbox']
          ]
        }
      }
    }
  ]
}

Usage

When you want to include a CodeSandbox in your markdown file just put the embed link on its own line.


This is just a test

https://codesandbox.io/embed/62o36qkmrr?fontsize=12

This is another one

https://codesandbox.io/embed/019ozxz8m0?fontsize=14

This is what the result looks like

Embed CodeSandbox in Markdown

Embed Options

You can pass options to the embed as a query string parameters. If you want to know what options are available check out the documentation on CodeSandboxes website below.

https://codesandbox.io/docs/embedding#embed-options

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free