Question

问候，我正在尝试通过Ajax调用使用highlight.js：它从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样式

1 个答案: