2016-05-16 5 views
-1

Я пытаюсь реализовать highlight.js. У меня есть и index.html. andside телоhighlight.js: Как сообщить об этом игнорировать default 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

Так что я просто обнаружил, что при попытке отобразить html внутри pre tag все html-символы должны быть скопированы. Сохраняя все как есть, я скорректировал сценарий на

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

и это делает трюк. (беря каждый из элементов кода, захватывая внутренний html и анализируя его как текст)

 Смежные вопросы

  • Нет связанных вопросов^_^