Markbox

Parse your code in markdown into CodeSandbox.

This preview is not real time parsed. After modifying the content, you need to click the Run button to preview.

Usage

$ npm i markbox

Markbox will parse your markdown using marked and replace all of codes in markdown with Codesandbox embed iframe.

const markbox = require('markbox')

const markdownContent = `Your markdown content...`

const html = await markbox.parse(markdownContent)

Depends on your code languange, Markbox will transform your codes to different template.

js, javascript

jsx

Rather than writing full React render code, you can simply just write your React component and use mount() to mount it:

vue

Your single file Vue component will automatically render to the root element!

reason

Other unsupported language code will directly output as a normal code block.

You can add a  above the code to avoid the code being put into CodeSandbox:

console.log('I am not in CodeSandbox Now!')

Parse markdown to html string with marked

Options:

embedOptions?: object: CodeSandbox embed options object
fallback?: boolean: Show code block directly if CodeSandbox generating failed. false is by default.
useCache?: boolean: A in-memory cache that cache the sandbox_id in memory. true is by default.

MIT License