@remark-embedder/transformer-codesandbox

---

!Build Statusbuild-badgebuild !Code Coveragecoverage-badgecoverage !versionversion-badgepackage !downloadsdownloads-badgenpmtrends !MIT Licenselicense-badgelicense !All Contributorsall-contributors-badge !PRs Welcomeprs-badgeprs !Code of Conductcoc-badgecoc

The problem

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

This solution

This is a @remark-embedder@remark-embedder/core transformer for CodeSandboxcodesandbox URLs.

Table of Contents

• Installation
• Usage
• Inspiration
• Other Solutions
• Issues

- 🐛 Bugs - 💡 Feature Requests

• Contributors ✨
• LICENSE

Installation

This module is distributed via npmnpm which is bundled with nodenode 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@remark-embedder/core

Other Solutions

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

Issues

Looking to contribute? Look for the Good First Issuegood-first-issue label.

🐛 Bugs

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

💡 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 Requestsrequests

Contributors ✨

Thanks goes to these people (emoji keyemojis):

<td align="center"><a href="https://michaeldeboey.be"><img src="https://avatars3.githubusercontent.com/u/6643991?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michaël De Boey</b></sub></a><br /><a href="https://github.com/remark-embedder/transformer-codesandbox/commits?author=MichaelDeBoey" title="Code">💻</a> <a href="https://github.com/remark-embedder/transformer-codesandbox/commits?author=MichaelDeBoey" title="Documentation">📖</a> <a href="#infra-MichaelDeBoey" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/remark-embedder/transformer-codesandbox/commits?author=MichaelDeBoey" title="Tests">⚠️</a> <a href="#maintenance-MichaelDeBoey" title="Maintenance">🚧</a></td>

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

LICENSE

MIT