2010-09-01 92 views
0

我使用語法高亮插件,並且我想始終將它應用於特定的div區域。 div的內容將根據點擊式超鏈接而改變。我怎樣才能在任何時候在「mydiv」元素周圍放置語法高亮度腳本標籤?語法熒光筆圍繞Div元素

<script> 
    function viewCode() { 
     $('#mydiv').load('euler/_48.py'); 
    } 
</script> 

<a href="#" onClick="viewCode();return true">View Code</a> 

<div id="mydiv"> 
    my div's initial content 
</div> 

<script type="syntaxhighlighter" class="brush: js"><![CDATA[ 
    //always apply this script to mydiv 
]]></script> 

回答

3

SyntaxHighlighter的有了,你不能突出在頁面上任意元素,所以我們會堅持到script方法來代替。

首先,給腳本和定位標記的id,像

<a href="#" id="show_code">Show Code</a> 
<script type="syntaxhighlighter" class="brush: js" id="highlighted"></script> 

然後,使用當用戶點擊鏈接此加載內容

$('#show_code').click(function(){ 
    $.get('euler/_48.py', function(data){ 
    $('#highlighted').html('<![CDATA[' + data + ']]>'); 
    SyntaxHighligher.highlight(); 
    }); 
}); 

記住常用方法使用syntexhighlighter.js在這裏不起作用,因爲SyntaxHighlighter.all()函數僅將highlight()函數綁定到onload事件,因此每次頁面更新時都必須自己調用該函數通過每次更新頁面時添加對SyntaxHighligher.highlight()函數的調用。


或者,我通常會推薦pre方法。它幾乎與上面相同,但是我們使用pre元素,並使用text() jQuery函數正確地完成轉義。使用pre元素:

<pre class="brush: js" id="highlighted"></pre> 

有了這段JavaScript

$.get('euler/_48.py', function(data){ 
    $('#highlighted').text(data); 
    SyntaxHighligher.highlight(); 
}); 
+0

感謝。我將如何將它應用於#mydiv?它只是$('#mydiv')。get而不是我的$('#mydiv')。load?我一直在試着用我剛纔所說的話來提出你的建議,但目前它不適合我。 – Steve 2010-09-01 09:21:21

+0

@medikgt你不能,也不應該 - 就像我在第一行所說的那樣,你不應該嘗試在任何* HTML元素上使用syntaxHighlighter - 只有'script'或'pre'。 '.load()'語法是特殊的,因爲它實際上是從元素中調用的。 – 2010-09-01 09:36:30

+0

@medikgt我覺得你在混淆某些事情。你需要澄清你想要在這裏做什麼。我以爲你在做的是將外部文件的內容加載到'div'中,然後對其應用語法突出顯示,對吧? – 2010-09-01 09:38:02

0

的我想你可以調用HighlightAll方法

例子: dp.SyntaxHighlighter.HighlightAll('code');

蘇丹