前言

  官方文档: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,并在文末引入一个js
1
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',//注意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'
}
})

  效果如下:

  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-sandboxb{
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-sandboxa{
color: #FF00FF!important;
}
[data-theme=dark]
.mini-sandboxi{
color:#5F9EA0!important;
}
[data-theme=dark]
.mini-sandbox .ͼl{
color:#969896!important;
}
.mini-sandbox{
margin-bottom: 10px;
}