代码预览插件runCode.js

2017-8-29更新

今天把这个功能封装成一个插件，取名jquery.runCode.js，方便调用。
[Demo]
[gitHub]

2017-8-29以前内容：

昨天写了一篇关于js对象数组分组的笔记，并做了demo，这种纯js的demo适合在线运行的形式演示，于是写了这个在线运行代码功能。

点红框运行：

弹出窗口（左侧代码，右侧预览）：

实现思路：

抓取目标代码放入左侧<code>标签中（方便代码高亮，这里我用的DlHighlight）。右侧为iframe，编辑完成后点击顶部运行按钮，将<code>中的内容全部document.write到iframe中即可。注意特殊字符转义，且不要使用innerHTML方式写入iframe。

试试下面的代码：

<style>
    h1{color:green;}
</style>

<h1>hello~</h1>

<script>
    document.write('DH');
</script>