self-rendering markdown

self-rendering.html

/*

          How to use this script

Assuming this script is stored under filename md.js,
your html file will look some like the following.
-------------------------------------------------------
<script src="md.js"></script>

# Social media sites

* [twitter](https://twitter.com)
* [youtube](https://youtube.com)
-------------------------------------------------------

Modify the script to change the menu and styles.

*/
(function() {
  var menu = "[index](index.html)"                     +
             " - [mus](mus.html)"                      +
             " - [poem](poem.html)"                    +
             " - [politics](politics.html)"            +
             " - [tech](tech.html)"                    +
             " - [propaganda](propaganda.html)"        +
             " - [personalities](personalities.html)"  +
             "\n\n";
  var styleRules = `
    ul { list-style: none; }\n
    h2 { font-size: 1em; font-weight: normal; font-style: italic; }\n`;
  var style = document.createElement('style');
  style.innerHTML = styleRules;
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = "https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js";
  script.onload = function() {
    document.body.innerHTML = marked(menu + document.body.innerHTML);
  };
  document.getElementsByTagName('head')[0].appendChild(style);
  document.getElementsByTagName('head')[0].appendChild(script);
})();