代码预览插件runCode.js

2017-06-23 | 7,835浏览 | 2评论 | 标签:无

2017-8-29更新

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

2017-8-29以前内容:

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

点红框运行:

code-preview2.jpg

弹出窗口(左侧代码,右侧预览):

code-preview.jpg

实现思路:

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

试试下面的代码:

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

<h1>hello~</h1>

<script>
    document.write('DH');
</script>
(本篇完。有疑问欢迎留言探讨)

已有 2 条评论

  1. unt

    runCode.js
    1.预览远程图片(URL)时,有些未正确显示;
    2.有些样式未生效;
    3.可否增假美化功能

    1. DH

      源码已放在github上,请按需修改。

留言:

*

* (方便回复通知)

打赏
编辑代码 运行结果
退出