代码之家 › 专栏 › 技术社区 › Joliet

HighlightJS中出现的部分CSS样式

highlight.js css javascript

Joliet · 技术社区 · 6 年前

打招呼, 我试图将highlight.js与ajax调用结合使用:它从php中提取数据脚本。这个 code 元素被填充,但它只设置背景和字体颜色的样式 (在devtools中验证) ,语法突出显示不发生。我已经用 htmlspecialchars 在我的php脚本中。通过直接在元素中键入代码,我得到了正确的行为。我的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;

1 回复 | 直到 6 年前

Kosh 6 年前

htmlspecialchars($output); 皈依者 < 我是说, > 以及其他符号 html entities 这就是为什么Highlighter不能识别你的代码。你必须 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)
});