SOURCE

inp.onchange = function() {
    var html = inp.value;
    // var linkAddr = JSON.stringify(html);
    // linkAddr = "javascript: " + encodeURIComponent(linkAddr);
    // opt.src = linkAddr;
    opt.srcdoc = html;
}

inp.onchange();

<textarea id="inp" autocomplete="off" spellcheck="off">
<p>失焦之后才会应用哦！（因为我懒得写）</p>
<style>
html {
    background: linear-gradient(#ccf 0%, #cfc 100%);
    background-size: 100vw 100vh;
    background-attachment: fixed;
}
output:empty::after {
    content: "未知";
}
.heimu:not(:hover) {
    color: black;
    background: black;
}
</style>
<p>定时器编号是 <output id="tid"></output> 。</p> 
<p>冷知识：</p>
<ul>
<li><code class="language-javascript">document.write()</code> （或者<code class="language-javascript">document.open()</code>）会刷新文档，但不会清理 JavaScript 定时器哦。</li>
<li><code class="language-javascript">document.write()</code> （或者<code class="language-javascript">document.open()</code>）不会触发 <code>&amp;lt;iframe></code> 的 <code>load</code> 事件。</li>
<li><code>data:</code> URI 会被当做非同源内容，如果你期望脚本交互就会有些麻烦，但是能嵌入的东西更多，更安全。</li>
<li><code>&amp;lt;iframe></code> 是有 srcdoc 属性的，这一属性可以直接生成页面，生成页面和爸爸是同源的，兼容性放到 2025 年算非常不错。</li>
</ul>

<hr><p>这是我爸爸的输入框里面的代码。</p>
<pre><code id="code" class="language-html"></code></pre>
<script>
try {
    tid.innerText = setTimeout("document.body.prepend('你竟然等着我呢?');",10000);
} catch(e) {
    document.write(e);
}
</script><script>
try {
    code.textContent = window.parent.inp.value;
} catch(e) {
    document.write(e);
}
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"></script>
<script>hljs.configure({cssSelector: "code"});hljs.highlightAll();</script>
</textarea>
<iframe id="opt"></iframe>

body > * {
    box-sizing: border-box;
    border: 1px gray solid;
    border-radius: 3px;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

textarea {
    height: 50%;
    resize: vertical;
}
iframe {
    flex: auto;
}