2

私は、ウェブサイトにコードを表示するためにhighlight.jsを使用しています。ここで、強調表示されたコードの一部をリンクに設定したいと思います。ただし、リンクは処理されず、コードとして表されます。

これは私のコードがどのように強調表示されているかです:

<xml attribute="value">My <a href="test.html">xml content</a> that should be clickable (link)</xml>

しかし、私はこれとコンテンツという単語をリンクとして持ちたいと思います:

<xml attribute="value">My content that should be clickable (link)</xml>

ドキュメントで指定されているような highlight.js を次のように使用します。

<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<pre><code id="myCode"><xml attribute="value">My <a href="test.html">content</a> that should be clickable (link)</xml></code></pre>

強調表示された xml コード内でリンクを使用するにはどうすればよいですか?

情報！ 問題が発生するのは、コード全体を含む JSON を受け取る ajax 呼び出しでコンテンツを変更しているためだけであることがわかりました。

        $.ajax({
        url: 'GetCode',
        data: {id: id},
        dataType: 'json',
        type: 'get',
        cache: false,
        success: function(node) {
            $("#myCode").text(node.code);
            $('#myCode').each(function(i, e) {
                hljs.highlightBlock(e)
            });
        }
4

1 に答える 1

2

$(obj).text()現在のコードの問題は、の代わりにjquery を使用していることだと思います$(obj).html()。.text()textNode を作成して追加することで、テキストを単純にエスケープします。これは、ユーザーが送信したデータを表示するのに便利です。ただし、これは、リンクが HTML ではなくコードとして表示されることを意味します。

そのためには HTML を使用する必要がありますが、ブラウザが HTML タグである可能性があると判断するため、XML タグは表示されません。したがって、XML タグをエスケープする必要がありますが、アンカー/リンクは html コードのままにします。だから何か

var code= var code='XMLCODEHERE' //let's say this is data from ajax return
var escapedCode=code.replace(/</g,"&lt;") //rough escaping of code
//rough unescaping of anchors
var escapedCodeNotAnchor=escapedCode.replace(/&lt;a /g,"<a ")  
escapedCodeNotAnchor=escapedCodeNotAnchor.replace(/&lt;\/a>/g,"</a>")

$("#myCode").html(escapedCodeNotAnchor) //instead of .(text)

例

于 2014-05-23T13:45:39.440 に答える