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="width: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"

/>
  1. &lt;iframe


&lt;iframe

  src="https://codesandbox.io/embed/antd-reproduction-template-6e93z?autoresize=1&fontsize=14&hidenavigation=1&theme=dark"

  style="width: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"

/&gt;

iframe pre

  1. pre &lt;iframe

<iframe

  src="https://codesandbox.io/embed/antd-reproduction-template-6e93z?autoresize=1&fontsize=14&hidenavigation=1&theme=dark"

  style="width: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 发布文章使用：只允许注册用户才可以访问！

how to auto open demo and create it in a new codesandbox的更多相关文章

  1. mdev USB disk auto mount demo

    /********************************************************************* * mdev USB disk auto mount de ...

  2. Oracle Demo ->> CREATE TABLE

    Demo One CREATE TABLE employees_demo ( employee_id ) , first_name ) , last_name ) CONSTRAINT emp_las ...

  3. Spring Auto proxy creator example

    In last Spring AOP examples – advice, pointcut and advisor, you have to manually create a proxy bean ...

  4. 深入理解Auto Layout 第一弹

    本文转载至 http://zhangbuhuai.com/2015/07/16/beginning-auto-layout-part-1/ By 张不坏 2015-07-16 更新日期:2015-07 ...

  5. 【转载】WebStorm安装 & Nodejs-Express Demo

    试试下面这个方法: http://www.sdifenzhou.com/?p=6941 从这里下载 http://pan.baidu.com/share/link?shareid=2512210975 ...

  6. Android P HIDL demo代码编写 （原创）

    之前的文章已经分析了HIDL服务的注册和调用,这篇文章来总结下一个HIDL的服务如何编写. 缩写HAL文件 首先要确认放置文件夹和接口的包名,因为这跟后面使用脚本生成一部分代码有关,一般默认的放在ha ...

  7. Openstack Basic

    html,body { } .CodeMirror { height: auto } .CodeMirror-scroll { } .CodeMirror-lines { padding: 4px 0 ...

  8. MYSQL主键自动增加的配置及auto_increment注意事项

    文章一 原文地址: http://ej38.com/showinfo/mysql-202971.html 文章二:   点击转入第二篇文章 在数据库应用,我们经常要用到唯一编号.在MySQL中可通过字 ...

  9. Oracle建立表空间和用户

    Oracle建立表空间和用户 建立表空间和用户的步骤: 用户 建立:create user 用户名 identified by "密码"; 授权:grant create sess ...

随机推荐

  1. 转 15 jmeter分布式性能测试

    15 jmeter分布式性能测试   背景由于jmeter本身的瓶颈,当需要模拟数以千计的并发用户时,使用单台机器模拟所有的并发用户就有些力不从心,甚至还会引起Java内存溢出的错误.要解决这个问题, ...

  2. Eureka详解系列(二)--如何使用Eureka(原生API，无Spring)

    简介 通过上一篇博客 Eureka详解系列(一)--先谈谈负载均衡器 ,我们知道了 Eureka 是什么以及为什么要使用它,今天,我们开始研究如何使用 Eureka. 在此之前,先说明一点.网上几乎所 ...

  3. ensure that both new and old access_token values are available within five minutes, so that third-party services are smoothly transitioned.

    WeChat public doc https://developers.weixin.qq.com/doc/offiaccount/en/Basic_Information/Get_access_t ...

  4. 深入TLS/SSL协议

    总体 TLS/SSL协议是为了解决网络通讯中的信息安全问题而诞生的. 它的设计目的主要有三个: 身份验证--搞清楚与我通讯的人是不是我所想的那个. 保密性--就算第三方拿到了通讯内容,也搞不清楚其中所 ...

  5. 关于项目中Spring版本与jdk1.8兼容问题解决

    问题描述: 在用公司的工具搭建项目时,由于使用Spring框架,同时要求jdk版本为1.8:当部署完成以后,项目总是无法运行,会报错: Context namespace element 'annot ...

  6. svn 启动项目报错，项目被lock

    问题描述 问题解决 (一)Eclipse SVN 插件处理 (二)SVN 客户端处理 (三)删除lock文件 问题描述 在使用开发工具开发项目时(如Eclipse),在做项目的中途,有时候Eclips ...

  7. CS代理+proxychains+nmap进行内网扫描

    前提:拿下边界机之后,进入内网,想用nmap怎么办? CS可以开启代理,但是是socks4的代理,只能使用tcp协议,所以nmap使用的时候要使用-sT选择使用tcp_协议,要使用-Pn不使用ICMP ...

  8. Mysql 基本操作命令

    1.添加用户 1.1 登录MYSQL: @>mysql -u root -p @>密码 1.2 创建用户: 格式:grant select on 数据库.* to 用户名@登录主机 ide ...

  9. Object类的常见方法总结

    ♧ Object类是比较特殊的类,它是所有类的父类.主要提供了11个方法(JDK 1.8为例): /** * native方法,用于返回当前运行时对象的Class对象,使用final关键字修饰,子类不 ...

  10. Linux下安装MySQL及远程连接MySQL

    安装方式一:通过下载官方安装包安装 由于Linux安装MySQL会遇到各种依赖问题,本博文整理了下安装方放,避免遇到依赖问题 查看是否自带mariadbrpm -qa|grep mariadb然后卸载 ...