最近给网站做了个「代码执行器」，主题我直接抄了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
