技术文中直接执行代码

最近给网站做了个「代码执行器」，主题我直接抄了Xcode 的主题，现在代码终于可以在浏览器里实时看到运行效果了。效果如下：

还可以进行全屏编辑代码：

以后看技术文章可以这样看：

有人可能会问，这个功能有什么用？

这个不吹牛逼，如果技术文章能够配上一个代码执行器，那简直太棒了。比如一篇算法文章，光有思路不行，关键是能够掌握代码的写法。如果看不懂代码可以直接点击一下「运行」按钮，即可看到代码的执行效果。比如上图中，是我在《大厂算法面试》这本小书的截图，可直接运行代码。详细内容，可以看：

头条：判断是否为 IP 地址

《大厂算法面试》小书

一个 api 的作用是什么，用文字解释半天，用代码直接输出执行结果效果更佳。

如何实现这个功能

前端生态真的是太牛逼了，不管你实现什么功能都会有现成的方案，你只需要稍微改一改即可，如果实在满足不了你的需求改一下源码即可。这一点，比移动端强太多了。

在前端小课网站上我放了一份常用的第三方库，其中有提到 codeMirror，它是一款代码编辑器，基于它实现了「代码执行器」。

https://lefex.gitee.io/framework-book/codeMirror.html

在实现过程中遇到了几个问题：

1、主题太丑

说实话，在 codeMirror 中没找到一个我喜欢的主题，最后直接把 Xcode 的主题复制了一份。codeMirror 支持主题自定义功能，直接修改 css 样式即可，然后导入到项目当中：

2、执行代码

执行 js 代码字符串，直接使用 eval 函数

console.log(eval('2 + 2'));
// expected output: 4

详细内容可以看：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

3、console.log 输出 hook

代码执行过程中，可以通过 console.log 来输出内容，进行调试代码。直接重写 console.log 函数，把要输出的内容显示到 UI 上即可。

本文主要讲了一个大体的思路，其中还有很多细节要处理。可以直接到小课网站体验。

网站地址：

https://lefex.gitee.io/

https://lefex.github.io/

大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

本文地址：https://blog.csdn.net/lefex/article/details/109699287