title: Using mediawiki API to display a wikipedia page as-is
body: <p>I would like to use the API to display a wikipedia page as-is on my website.
  I found <a href="https://www.mediawiki.org/wiki/API:Styling_content" rel="nofollow noreferrer">this API</a> which could help but the documentation is limited and I can't figure much on how to use it.
  In the user guide they reference a toy wiki browser called <a href="https://jsfiddle.net/cscottnet/ceshcL3u/presentation/" rel="nofollow noreferrer">miniwiki</a>, I used that as a base for the following code :</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;!-- testing purpose file, used for trying to print a correctly formatted wikipedia page --&gt;
  
  
  &lt;html&gt;
      &lt;head&gt;  &lt;!-- Tout ce qui est pas dans le contenu --&gt;
          &lt;title&gt; game setup &lt;/title&gt; &lt;!-- Titre de l'onglet --&gt;
  
          &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js&quot;&gt; &lt;/script&gt;
  
          &lt;link rel=&quot;stylesheet&quot; href=&quot;//en.wikipedia.org/w/load.php?modules=mediawiki.legacy.commonPrint,shared|mediawiki.skinning.elements|mediawiki.skinning.content|mediawiki.skinning.interface|skins.vector.styles|site|mediawiki.skinning.content.parsoid|ext.cite.style&amp;amp;only=styles&amp;amp;skin=vector&quot;/&gt;
  
      &lt;/head&gt;
  
      &lt;body style=&quot;background-color:white;&quot;&gt;
  
          &lt;h1 id=&quot;wiki-title&quot;&gt;MiniWiki&lt;/h1&gt;
  
          &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
  
          &lt;script&gt;
              var contentElem = document.getElementById('content');
              var stylesheetElem = document.getElementById('style');
              var titleElem = document.getElementById('wiki-title');
              var url = 'https://en.wikipedia.org:443/api/rest_v1/page/html/Ancient_Egypt';
  
              $.ajax(url).then(function (data) {
                  var $content = $(contentElem).empty();
                  // $(stylesheetElem).remove();
  
                  var doc = (new DOMParser()).parseFromString(data, 'text/html');
  
                  // stylesheetElem = doc.querySelector('head link[rel=&quot;stylesheet&quot;]');
                  $('head').append(stylesheetElem);
  
                  $(titleElem).text(doc.title.replace(/^User:Cscott\//, '').replace(/_/g, ' '));
  
                  Array.from(doc.body.attributes).forEach(function (attr) {
                      $content.attr(attr.name, attr.value);
                  });
                  $content.append(Array.from(doc.body.children));  
              });       
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  <p>As you can see if you try it, it returns some 404 errors, the page display some elements correctly, and some not at all. The same issues are present on the Miniwiki, so I wonder how to correct them.</p>