Highlight.js implementation example

by jmpp77

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css">
<h1>Bienvenue sur mon site</h1>

<p>Voici un exemple de code coloré en HTML :</p>

<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<p>Et un autre en CSS :</p>

<pre><code class="css">section .links a[href^=https]::before {
  content: "\1F512";
}</code></pre>

<p>Et un en JavaScript :</p>

<pre><code class="js">(function($) {
  'use strict';
  
  $(document).ready(function() {
    $('#mySlider').initFooSlider( {responsive:true} );
  });
})(jQuery);</code></pre>

JavaScript

// Attention à placer cette ligne dans une fonction type : $(document).ready() 
hljs.initHighlightingOnLoad();