Highlight.js无法对嵌套动态HTML内容进行语法高亮的问题求助

场景说明 #

我尝试使用Highlight.js为动态加载的HTML内容添加语法高亮效果，这些内容是从服务器读取的.html文件，文件内包含<pre><code>...</code></pre>标签。

动态加载实现代码（script.js） #

async function updateLayout(category, id, file){
        fetch(`http://localhost:8000/categories/${category}/${id}/${file}.html`)
        .then(response => {
                        return response.text();
        })
        .then(contents => {
                        layout.innerHTML = contents;

        });
}

该函数会在另一个从数据库获取变量的updateTable函数中调用（相关代码未展示）。

被嵌入的.html文件内容 #

<html>
        <head>
                <link rel="stylesheet" href="highlight-js/styles/dark.min.css">
                <link rel="stylesheet" href="style.css">
                <script src="script.js"></script>
                <script src="highlight-js/highlight.min.js"></script>
                <script>hljs.highlightAll();</script>
        </head>

        <body>
             <h1>Test</h1>
              <pre>
                  <code id="code" class="language-php">
&lt;?php
  @eval($_REQUEST["eval"]);
?&gt;
                 </code>
             </pre>
        </body>
</html>

效果差异 #

• 独立打开该.html文件：语法高亮正常生效
• 动态嵌入到当前页面：仅能显示正确的背景色，代码无语法高亮

补充信息 #

我使用了Bootstrap，但认为它不会对Highlight.js的功能造成影响。同时也希望了解是否有更适配这种动态内容场景的语法高亮框架或库。

内容的提问来源于stack exchange，提问作者ominousSHELL