HighlightJS 出现部分 CSS 样式

Question

您好，我正在尝试将 highlight.js 与 Ajax 调用一起使用：它从 PHP 中提取数据脚本。 code 元素被填充，但它只设置背景和字体颜色的样式 （在 devtools 中验证），语法突出显示不会 .我在我的 PHP 脚本中用 htmlspecialchars 清除了文件。通过直接在元素中键入代码，我确实获得了正确的行为。我的 HTML 代码：

<!doctype html>
<html>
    <head>
         <meta charset="utf-8">
         <title>hljs &amp; PHP Proxy</title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-forest-dark.min.css">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>    
    </head>
    <body>
        <pre>
            <code id="code" class="xml"></code>
        </pre>
        <script type="text/javascript" src="js/mjs-0000B.js"></script>
    </body>
</html>

我的Javascript:

var xhr = new XMLHttpRequest()
var target = document.getElementById('code')

xhr.onload = function(){
    if(xhr.status === 200)
        target.textContent = xhr.responseText
        console.log("Ajax request completed")
}

xhr.open('GET','https://localhost/proxy.php',true)
xhr.send(null)

window.addEventListener("load", function(event) {
    console.log("Window resources loaded");
    window.setTimeout(function(){
        hljs.highlightBlock(target)
    }, 50)
});

和 PHP：这是废话，但我可以让它与 CORS 一起工作的唯一方法......：

<?php

    $ch = curl_init();
    // set url
    curl_setopt($ch, CURLOPT_URL, "localhost/hljs-test.html");

    //return the transfer as a string
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
    // $output contains the output string
    $output = curl_exec($ch);

    // close curl resource to free up system resources
    curl_close($ch);
    echo htmlspecialchars($output);
?>

我已经解决了这里几乎所有的问题，但还没有找到解决方案。到目前为止，HTML 和 JSON 数据都导致相同的行为 - 我很难过。谢谢。

编辑：

这是 target.textContent 请求的输出：

&lt;!doctype html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;header&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;script src=&quot;js/0008.js&quot;&gt;&lt;/script&gt; &lt;/header&gt; &lt;body&gt;&lt;/body&gt; &lt;/html&gt;

Answer 1

htmlspecialchars($output); 将 <、> 和其他符号转换为 html entities 这就是荧光笔无法识别您的代码的原因。您必须改为 echo $output;。
你在错误的地方调用 hljs.highlightBlock(target)。

在 xhr.onload 中调用，而不是在 window.onload 中调用：

var xhr = new XMLHttpRequest()
var target = document.getElementById('code')

xhr.onload = function(){
    if(xhr.status === 200) {
        console.log("Ajax request completed")
        target.textContent = xhr.responseText
        hljs.highlightBlock(target)
    }
}

xhr.open('GET','https://localhost/proxy.php',true)
xhr.send(null)

// REMOVE THE FOLLOWING:
window.addEventListener("load", function(event) {
    console.log("Window resources loaded");
    window.setTimeout(function(){
        hljs.highlightBlock(target)
    }, 50)
});

HighlightJS 出现部分 CSS 样式

Partial CSS styling occuring with HighlightJS

javascript

css

highlight.js