简介

开发了一个组件，可以让「码上掘金」拥有更强大的在线代码编辑功能，支持增、删、改文件和文件夹，支持文件拖拽，支持自动导入第三方依赖包，支持多种流行主题等。

让你的文章拥有更强的代码示例展示功能。

先看示例 ↓

初次加载可能会较慢，使用的公共CDN，网络速度不确定

react项目示例

新开窗口查看

ant design示例

vue项目示例

element-ui示例

编辑器主题

支持多种编辑器主题（就是codesandbox的那些）

  amethyst,
  aquaBlue,
  atomDark,
  cobalt2,
  cyberpunk,
  dracula,
  ecoLight,
  freeCodeCampDark,
  githubLight,
  gruvboxDark,
  gruvboxLight,
  levelUp,
  monokaiPro,
  neoCyan,
  nightOwl,
  sandpackDark

使用教程

码上掘金

使用极其简单，只添加需要几行代码。

第一步

打开「码上掘金」新建代码片段-新建空白项目

第二步

粘贴下面代码到html区域

<div id="app">hello world</div>

<!-- 新增代码 start -->
<script src="https://unpkg.com/@rainetian/codebox/dist/umd/codebox.min.js"></script>
<script>
  Codebox.run({
    platform: 'juejin',template: 'react',rootId:'app',theme: 'atomDark'
  })
</script>
<!-- 新增代码 end -->

如果unpkg这个地址访问不通，可以更换尝试，例如https://cdn.jsdelivr.net/npm/@rainetian/codebox/dist/umd/codebox.min.js

第三步

设置编辑器，开启自动运行和纯净模式

到此就完成了，可以使用了。

然后还有一个问题，编辑完如何保存代码？

点击右上角的复制按钮，会复制当前编辑器代码到剪切板，粘贴到js编辑区域即可，如图所示

初始化时，组件会读取window.codeboxFiles变量，如果有值就使用变量值，没有值就使用模版默认文件

编辑完，粘贴完，要记得点击保存哦！~

语雀

语雀是我常用的笔记软件，也不支持自定义iframe嵌入，所以 codesandbox 和 stackblitz 也都用不了，曾经留言反馈过，希望添加类似功能或者嵌入iframe，不过一直没有增加，这种示例功能还是能让笔记中的代码记录更丰富、直观和立体一些

但是语雀可以嵌入「码上掘金」，相当于变相实现了，看下面效果图：

怎么使用：在语雀中键入/的时候会唤起很多功能选择，在最下面，选择「码上掘金」，粘贴示例地址即可。

虽然保存代码的时候需要切换到掘金，体验稍微有一点割裂，还是希望官方后续能加入类似功能

自定义模版

「码上掘金」支持「保存为模版」，方便后续创建同类型项目，例如新建两个模版，一个react模版，一个vue模版

实现原理

一句话概括就是 在掘金编辑器中引入的组件会在掘金的iframe_a里运行一个编辑器再生成一个无url的iframe_b,并向iframe_b中注入编译后的代码并运行。

其中实现细节得单独写篇文章。也可浏览源码。

后续规划

静态模版支持
支持项目下载
编辑器替换
bug修复
升级react-playground (改版中)
待定

codebox代码开源在github上，如果对你有帮助，感谢帮我点个星和赞。

写个组件给「码上掘金」升级一波：拥有更强的在线代码编辑功能

简介