关于博客园的在线演示-白红宇

关于博客园的在线演示

阅读量：468 次

发布时间：2019-03-06

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

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

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

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

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

在博客园的编辑器中，切换到文本编辑模式，手动输入需要的HTML代码。

将不需要的标签全部隐藏，仅保留textarea标签。

在textarea内输入如下代码：


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

在页面的脚本部分添加以下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替换，即将<替换为&lt;，>替换为&gt;。

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

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

你可能感兴趣的文章