关于博客园的在线演示

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

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

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

 　　看看我刚作的demo：http://www.cnblogs.com/xumengxuan/p/3362886.html

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

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

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

　　<style type="text/css">

　　*{display:none;}

　　</style>

　　<textarea id="cnblogsShowCode">

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

　　</textarea>

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

　　

<script type="text/javascript">
$(function(){
     var winname = window.open('', "_self", '');

        var content = document.getElementById("cnblogsShowCode").value;

        winname.document.open('text/html', 'replace');

        winname.opener = null

        winname.document.writeln(content);

        winname.document.close();
})        
</script>

　　固然，使用这种方法，也是能够不用隐藏没必要要的标签。只是我发现，若是不隐藏的话，打开这个页面时，会首先显示出原来的内容，而后才显示你要演示的代码。给人一种被替换的感受。因此，仍是将博客园默认的html标签隐藏了比较好。

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