本文共 807 字，大约阅读时间需要 2 分钟。
在博客园发布文章时，需要在线演示代码却无法托管HTML文件，这确实是个不少人会遇到的问题。经过一番探索，我找到了一个可行的解决方案。
传统的方法是将代码直接写在textarea中，然后通过JS打开新窗口来展示，不过博客园会自动屏蔽掉style标签里的内容，这会影响代码的展示效果。因此，我决定采取另一种策略。
在研究其他博友的文章时，我发现有些人会完全避免使用任何标签，但这样做并不是最优的选择。经过深入思考，我决定采取另一种方法：将不必要的HTML标签隐藏起来。
具体来说，我使用以下方法来实现代码的在线演示：
在博客园的编辑器中，切换到文本编辑模式，手动输入需要的HTML代码。
将不需要的标签全部隐藏，仅保留textarea标签。
在textarea内输入如下代码：
$(function() { var newWindow = window.open('', '_self'); var codeContent = document.getElementById('cnblogsShowCode').value; newWindow.document.open('text/html', 'replace'); newWindow.opener = null; newWindow.document.write(codeContent); newWindow.document.close();}); 通过这种方式，可以实现代码的在线演示。
需要注意的是，在代码中如果包含textarea标签，可能会导致匹配问题。解决方法是将代码中的textarea标签用HTML entities替换，即将<替换为&lt;，>替换为&gt;。
这种方法既简单又有效，可以满足在线演示的需求。
转载地址：http://hlvbz.baihongyu.com/