title: How to dynamically change the theme using highlight.js?
body: <p>I have the following code:</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="./styles/darkula.css"&gt;
      &lt;link rel="stylesheet" href="./styles/github.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;pre&gt;
              &lt;code class="html"&gt;
  &lt;button class="button is-primary"&gt;Primary&lt;/button&gt;
              &lt;/code&gt;
          &lt;/pre&gt;
          &lt;!-- Change theme button --&gt;
          &lt;button onclick="changeTheme()"&gt;Change theme&lt;/button&gt;
      &lt;/div&gt;
      &lt;script src="highlight.pack.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          hljs.initHighlightingOnLoad();
          document.querySelectorAll("code").forEach(function(element) {
              element.innerHTML = element.innerHTML.replace(/&amp;/g, "&amp;amp;").replace(/&lt;/g, "&amp;lt;").replace(/&gt;/g, "&amp;gt;").replace(/"/g, "&amp;quot;").replace(/'/g, "&amp;#039;");
          });
  
          function changeTheme() {
              ...
          }
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I am loading 2 themes in my file. Because the github theme is being loaded after the darkula theme, it gets applied to all the code elements automatically. This is fine, but I would like to allow users to dynamically change the theme to darkula with the click of the button. I could not find anything in the documentation. How can I do this?</p>