how to auto open demo and create it in a new codesandbox

how to auto open demo and create it in a new codesandbox

markdown & iframe

https://ant.design/docs/react/getting-started-cn

https://github.com/ant-design/ant-design/blob/master/docs/react/getting-started.zh-CN.md

iframe markdwon

1. <iframe

<iframe
  src="https://codesandbox.io/embed/antd-reproduction-template-6e93z?autoresize=1&fontsize=14&hidenavigation=1&theme=dark"
  style="100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="antd reproduction template"
  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
/>

2. <iframe

<iframe
  src="https://codesandbox.io/embed/antd-reproduction-template-6e93z?autoresize=1&fontsize=14&hidenavigation=1&theme=dark"
  style="100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="antd reproduction template"
  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
/>

iframe pre

1. pre <iframe

<iframe
  src="https://codesandbox.io/embed/antd-reproduction-template-6e93z?autoresize=1&fontsize=14&hidenavigation=1&theme=dark"
  style="100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="antd reproduction template"
  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
/>

docs auto generator

组件文档自动化方案

ci

https://github.com/ant-design/ant-design/blob/master/.codesandbox/ci.json

{
  "sandboxes": ["antd-reproduction-template-6e93z"]
}

https://codesandbox.io/s/antd-reproduction-template-6e93z

https://codesandbox.io/s/antd-reproduction-template-6e93z?from-embed

https://ant.design/docs/react/getting-started

https://ant.design/docs/react/use-in-typescript

cnblogs markdown render order bug

iframe demo must be placed to the last one ✅

1. ❌ <iframe />
2. ✅ <iframe></iframe>

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---