Highlight.js Example to Syntax Highlight HTML5 CSS3 and Javascript Source Code in Browser Full Example For Beginners

 

 

 

index.html

 

 

<div class="container">
  <pre>
    <code class="html">
<h1>HTML</h1>    
<div class="container">
  <pre>
    <code class="html">
      <h1>Hello World!</h1>
    </code>
  </pre>
</div>
    </code>
  </pre>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/dark.min.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>

<style>
  h1 {
  line-height: 1rem;
  margin-top: 0;
}
  
</style>



  
  

<div class="container">
  <pre>
    <code class="javascript">
<h1>JavaScript</h1>     
$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
    </code>
  </pre>
</div>

<div class="container">
  <pre>
    <code class="css">
<h1>CSS</h1>     
header h1.title {
  color: #cccccc;
}
    </code>
  </pre>
</div>

<script>
  
  hljs.initHighlightingOnLoad();
  
  
</script>

Leave a Reply