使用MiniSandbox前端代码可视化

原作者：『轻笑Chuckle』

这里我只是搬运过来的而已，后面准备拿来~~分享源码~~，这里先做一个记录，有兴趣的请支持原作者。

前言

官方文档:Mini Sandbox
Github仓库:mini-sandbox

在前面我找了不少的源码文件，但在本地保存太占地方，文件多了也不知道预览的样式是什么，这里就想到了保存到博客上并且也可以实现预览，这里我就想到了前期无意中看到了『轻笑Chuckle』分享的这个预览脚本。

我将其保存在本地引入，并且稍微根据需要对mini-sandbox.js作了一点修改，由于这个js压缩后还有450kb，我建议是在有使用需要的单页通过cdn引入。

1	<script src="https://unpkg.com/[email protected]"></script>

使用

在Hexo中使用，在markdown中需要的地方插入div标签,并在文末引入一个js。

1
2
3

<div id="my-sandbox"></div>
···
<script src="index.js"></script>

index.js中按文档这样写

new MiniSandbox({
    el: '#my-sandbox',//注意id和上面的一致
    files: {//要几个页面就仿照写法加几个
        'index.html': {//html
            title: 'HTML',//tab上实际显示的名字
            defaultValue: `<button>点击</button>`,//HTML的内容/代码
            cssLibs: ['index.css'],//html引入的css
            jsLibs: ['index.js'],//html引入的js
        },
        'index.css': {
            title: 'CSS',
            //CSS的内容/代码,写起来排版有点怪，但熟悉了也还好
            defaultValue: `button {
  width: 100%;
  color: red;
}
        `},
        'index.js': {
            title: 'JS',
            //JS的内容/代码
            defaultValue: `const btn = document.querySelector('button')
btn.addEventListener('click', () => {  
    alert('这是一个按钮')
})
        `}
    },
    //用来设置一些Sandbox的默认配置
    defaultConfig: {
        height: '330px',//Sandbox的高度,默认为 '300px'
        autoRun: true,//每次修改后是否自动运行, 默认等于 true
        autoRunInterval: 1000,//每次自动运行的时间间隔,单位为毫秒,默认等于300
        editorRange: '55%',//编辑区域默认占比,默认情况下编辑区域占50%
        draggable: true,//是否可以左右拖动布局, 默认为true
        direction: 'row',//控制上下/左右布局,默认为'row','row' | 'row-reverse' | 'column' | 'column-reverse'
      }
})