使用MiniSandbox前端代码可视化
发表于更新于
字数总计:1.3k阅读时长:5分钟阅读量:
QX-AI初始化中...
暂无预设简介,请点击下方生成AI简介按钮。
前言
官方文档:Mini Sandbox,Github仓库:mini-sandbox
这也算是一篇安利文,markdown本身的代码框直接显示代码,对于前端的代码来说,样式效果全靠截图,动不起来,也没交互,虽然可以复制到我另一个单页HTML/CSS/JS 在线工具,但切换页面和复制终究不直观,影响阅读体验。
前段时间看到这个新的前端代码、组件可视化方案,兼容任意js环境,就计划弄到Hexo上试试,其纯前端部署,不依赖服务器,静态页即可实现编辑和预览功能也十分契合Hexo静态站,手动适配了下Hexo的夜间模式以及pjax,效果非常不错。
安装
首先推荐先看官方文档。
我将其保存在本地引入,并且稍微根据需要对mini-sandbox.js
作了一点修改,由于这个js压缩后还有450kb,我建议是在有使用需要的单页通过cdn引入。
1
| <script src="https://unpkg.com/mini-sandbox@0.3.11"></script>
|
使用
在Hexo中使用也很方便
在markdown中需要的地方插入div,并在文末引入一个js1 2 3
| <div id="my-sandbox"></div> ··· <script src="index.js"></script>
|
index.js中按文档这样写1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| new MiniSandbox({ el: '#my-sandbox', files: { 'index.html': { title: 'HTML', defaultValue: `<button>点击</button>`, cssLibs: ['index.css'], jsLibs: ['index.js'], }, 'index.css': { title: 'CSS', defaultValue: `button { width: 100%; color: red; } `}, 'index.js': { title: 'JS', defaultValue: `const btn = document.querySelector('button') btn.addEventListener('click', () => { alert('这是一个按钮') }) `} }, defaultConfig: { height: '330px', autoRun: true, autoRunInterval: 1000, editorRange: '55%', draggable: true, direction: 'row', } })
|
效果如下:
Mini Sandbox不仅让我能方便展示前端的代码、组件,同时也允许读者直接修改代码框中的内容并运行(自动的,实时的),试着改改下面的代码,看看效果吧。
Mini Sandbox还对CSS有补全和提示,F12可以直接用浏览器的。
当然,如果单纯展示,不希望读者修改,也可以将css、js写在resource中:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| new MiniSandbox({ el: '#exhibition-sandbox', files: { 'index.html': { title: 'HTML', defaultValue: `<input type="text" value="0"><br><br> <input type="submit" value="加一"> <input type="submit" value="清除"> `} }, resource: { cssLibs: [], jsLibs: [], css: ` input { color: blue; } `, js: ` var text = document.getElementsByTagName('input')[0]; var add = document.getElementsByTagName('input')[1]; var clear = document.getElementsByTagName('input')[2]; add.onclick = function numberadd(){ text.value++; } clear.onclick = function clearnumber(){ text.value = 0; } `, } })
|
效果:
Mini Sandbox左上角按钮点击后有一些可自定义的功能
除了上述的一些基本功能,Mini Sandbox还有很多功能,如直接放置CDN链接展示组件库,如Sandbox事件的触发回调函数,如支持vue、react等,并且在持续更新。
更多示例
官方文档提供了一些示例:Examples & 示例
Hexo夜间适配
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
| .mini-sandbox{ box-shadow: none!important; border-radius: 7px; } [data-theme=dark] .mini-sandbox{ background-color: #151515!important; } [data-theme=dark] .cm-activeLine{ background-color: #252525!important; } [data-theme=dark] .mini-sandbox .sandbox-head{ background: #202020!important; } [data-theme=dark] .mini-sandbox .cm-gutters{ background: #202020!important; } .mini-sandbox .sandbox-head .sandbox-tab .sandbox-tab-active{ box-shadow: none!important; } [data-theme=dark] .mini-sandbox .sandbox-head .sandbox-tab .sandbox-tab-active{ background: #363636!important; } [data-theme=dark] .cm-activeLineGutter{ background: #363636!important; } [data-theme=dark] .sandbox-body .sandbox-gutter{ background: #363636!important; } [data-theme=dark] .mini-sandbox .sandbox-gutter{ border-left: 1px solid #404040!important; border-right: 1px solid #404040!important; } [data-theme=dark] .mini-sandbox .sandbox-head .sandbox-tab .sandbox-tab-active::after{ background: none!important; } [data-theme=dark] .mini-sandbox .sandbox-head .sandbox-tab .sandbox-tab-active::before{ background: none!important; } [data-theme=dark] .mini-sandbox .sandbox-render{ background: #E1E1E1!important; } [data-theme=dark] .mini-sandbox .ͼd{ color: #c3e88d!important; } [data-theme=dark] .mini-sandbox .ͼc{ color: #c3e88d!important; } [data-theme=dark] .mini-sandbox .ͼb{ color: #1E90FF!important; } [data-theme=dark] .mini-sandbox .ͼf{ color: #1E90FF!important; } [data-theme=dark] .mini-sandbox .ͼh{ color: #ff5370!important; } [data-theme=dark] .mini-sandbox .ͼa{ color: #FF00FF!important; } [data-theme=dark] .mini-sandbox .ͼi{ color:#5F9EA0!important; } [data-theme=dark] .mini-sandbox .ͼl{ color:#969896!important; } .mini-sandbox{ margin-bottom: 10px; }
|