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

在博客园发布文章时，需要在线演示代码却无法托管HTML文件，这确实是个不少人会遇到的问题。经过一番探索，我找到了一个可行的解决方案。

传统的方法是将代码直接写在textarea中，然后通过JS打开新窗口来展示，不过博客园会自动屏蔽掉style标签里的内容，这会影响代码的展示效果。因此，我决定采取另一种策略。

在研究其他博友的文章时，我发现有些人会完全避免使用任何标签，但这样做并不是最优的选择。经过深入思考，我决定采取另一种方法：将不必要的HTML标签隐藏起来。

具体来说，我使用以下方法来实现代码的在线演示：

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

4. 在页面的脚本部分添加以下JS代码：

$(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替换，即将<替换为<，>替换为>。

这种方法既简单又有效，可以满足在线演示的需求。

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