2016-05-16 7 views
-1

highlight.jsを実装しようとしています。 私はindex.htmlを持っています。 andside体はhighlight.js:デフォルトのCSSを無視する方法を教えてください

<p>Example code</p> 
<pre> 
    <code class="html"> 
     <title>Title</title> 

     <style>body {width: 500px;}</style> 

     <script type="application/javascript"> 
     function $init() {return true;} 
     </script> 

     <body> 
     <p checked class="title" id='title'>Title</p> 
     <!-- comment to be highlighte --> 
     </body> 
    </code> 
</pre> 

あるしかし、私はページをロードする際、<pre>の内側にあるものは何でも本当のhtmlとして処理され、それはまた、ページ上で使用して、メインのCSSイムは、内部のタグに適用されているページを、遺跡私のindex.htmlの頭で

私は <link rel="stylesheet" type="text/css" href="../css/highlight.css">

が含まれていると体がタグを閉じる前に、私は

<script src="../scripts/highlight.pack.js"></script> 
<script> 
    $(document).ready(function() { 
    $('pre code').each(function(i, block) { 
     hljs.highlightBlock(block); 
    }); 
    }); 
</script> 
を含ま

私はドキュメントを読んでいますが、見逃してしまったように見えません。

答えて

0

私はちょうどpreタグの中にhtmlを表示しようとした際に、すべてのhtml文字を彫刻する必要があることを知りました。すべてをそのままにして、私はスクリプトを

$(document).ready(function() { 
    $('pre code').each(function(i, block) { 
     var string = $(this).html(); 
     $(this).text(string); 
     hljs.highlightBlock(block); 
    }); 
}); 

に調整しました。 (それぞれのコード要素を取って内側のhtmlを取得し、それをテキストとして解析する)

関連する問題