unified

Project: remark-embedder/transformer-codesandbox

Package: @remark-embedder/transformer-codesandbox@3.0.0

  1. Dependents: 0
  2. @remark-embedder transformer for CodeSandbox links
  1. remark 214
  2. remark-plugin 82
  3. remark-embedder 2

@remark-embedder/transformer-oembed

@remark-embedder transformer for CodeSandbox links


Build Status Code Coverage version downloads MIT License All Contributors PRs Welcome Code of Conduct

The problem

You're using @remark-embedder/core to automatically convert CodeSandbox URLs in your markdown to the embedded version of those URLs.

This solution

This is a @remark-embedder transformer for CodeSandbox URLs.

Table of Contents

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install @remark-embedder/transformer-codesandbox

Usage

import remarkEmbedder from '@remark-embedder/core'
import CodeSandboxTransformer from '@remark-embedder/transformer-codesandbox'
// or, if you're using CommonJS require:
// const {default: CodeSandboxTransformer} = require('@remark-embedder/transformer-codesandbox')
import remark from 'remark'
import html from 'remark-html'

const exampleMarkdown = `
This is a CodeSandbox:

https://codesandbox.io/s/css-variables-vs-themeprovider-df90h
`

async function go() {
  const result = await remark()
    .use(remarkEmbedder, {
      transformers: [CodeSandboxTransformer],
    })
    .use(html)
    .process(exampleMarkdown)

  console.log(result.toString())
}

go()

This will result in:

<p>This is a CodeSandbox:</p>
<iframe
  src="https://codesandbox.io/embed/css-variables-vs-themeprovider-df90h"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

Inspiration

It's a long story... Check out the inspiration on @remark-embedder/core

Other Solutions

I'm not aware of any, if you are please make a pull request and add it here!

Issues

Looking to contribute? Look for the Good First Issue label.

πŸ› Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

πŸ’‘ Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a πŸ‘. This helps maintainers prioritize what to work on.

See Feature Requests

Contributors ✨

Thanks goes to these people (emoji key):


MichaΓ«l De Boey

πŸ’» πŸ“– πŸš‡ ⚠️ 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT