@remark-embedder/transformer-codesandbox
v3.0.0
Published
@remark-embedder transformer for CodeSandbox links
Downloads
125
Readme
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.
💡 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.
Contributors ✨
Thanks goes to these people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
MIT