title: Highlight code with Markdown-it.js and Highlight.js
body: <p>In the current example, a Markdown snippet is ported to HTML and the output is shown in the DIV (ID Content).</p>
  <p>The highlight function (hljs.highlight) is set to the options markdown-it (md). However, this is not carried out.</p>
  <p>What do I have to change so that the output uses the highlight.js?</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;/&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.1/build/styles/default.min.css&quot;&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/markdown-it/11.0.1/markdown-it.min.js &quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/highlight.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
  
  
      &lt;script&gt;
      var md = window.markdownit();
      md.set({
        highlight: function (str, lang) {
          if (lang &amp;&amp; hljs.getLanguage(lang)) {
            try {
              return '&lt;pre class=&quot;hljs&quot;&gt;&lt;code&gt;' +
                     hljs.highlight(lang, str, true).value +
                     '&lt;/code&gt;&lt;/pre&gt;';
            } catch (__) {}
          }
  
          return '&lt;pre class=&quot;hljs&quot;&gt;&lt;code&gt;' + md.utils.escapeHtml(str) + '&lt;/code&gt;&lt;/pre&gt;';
        }
      });
  
      var result = md.render('# markdown-it rulezz! \n\n```html &lt;pre&gt;&lt;code class=&quot;js&quot;&gt;function test();&lt;/code&gt;&lt;/pre&gt;```');
      document.getElementById('content').innerHTML = result;
      &lt;/script&gt;
  
      
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>