本文共 952 字，大约阅读时间需要 3 分钟。

　　在博客园发表文章，有时候就需要在线演示，demo演示，可是博客园又不能托管html文件。

　　很多人也想了不少的方法，下面是我的实现方法。

　　我也有看过其他博友的文章，是将代码写在textarea里，然后用js来实现。只是在预览后我们会发现，博客园将style标签里的内容屏蔽了，或者说，style标签里的样式，用在了整篇文章的版面。

 　　看看我刚做的demo：

　　我在用谷歌进行搜索的时候，发现有一位博友的文章：除了代码演示，其他任何的标签都没有，但是右键查看源代码的话，发现博客园所有默认的html标签都还在，也就是说，该博友将标签隐藏了，专门用这篇文章来做demo。于是，我也就沿着这个思路进行设计。

　　当然，在进行之前，我们需要解决一个问题，就是博客园会错误地引用textarea中的style标签，这里我的解决方案是：更改博客园的默认编辑器为文本编辑器，我们不让博客园提供任何的html代码，我们自己来编辑我们需要的html代码。

　　然后把不必要的标签隐藏，将代码放到textarea中，

　　<style type="text/css">

　　*{display:none;}

　　</style>

　　<textarea id="cnblogsShowCode">

　　<!-- 放置你的html代码 -->

　　</textarea>

　　再添加一段js代码来获取textarea中的内容，并在本页面中打开，js代码如下：

　　当然，使用这种方法，也是可以不用隐藏不必要的标签。只是我发现，如果不隐藏的话，打开这个页面时，会首先显示出原来的内容，然后才显示你要演示的代码。给人一种被替换的感觉。所以，还是将博客园默认的html标签隐藏了比较好。

　　这里还存在着一个问题：如果要执行的代码里也存在textarea标签，那么就会出现不必要的麻烦。<textarea id="cnblogsShowCode">会与第一次出现的</textarea>进行匹配，后面的代码都会忽略掉。这里的解决方案是：把代码里的</textarea>两边的尖括号改成用html代码代替，"<"写成"&gt"， ">"写成"&lt"，注意是代码里的标签，而不是最外层的</textarea>标签。

转载地址：http://hlvbz.baihongyu.com/