如何使用HighlightJS的部分CSS样式?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (434)

你好,我正在尝试在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>

我的抄本:

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 t.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. htmlspecialchars($output);converts<>和其他符号html entities这就是为什么萤光笔不能识别你的代码,你不得不echo $output;
  2. 你在打电话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)
});

扫码关注云+社区

领取腾讯云代金券