<link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>

  
<div class="wrapper">
  <h1>Show Html demos with data uri</h1>
  <textarea id="tx" class="pre">
    <!-- demo -->
   <div id="typeWriter"></div>
    <script type="text/javascript" rel="javascript">
      /*
      * HTML example
      * <div id="typeWriter"></div>
      + https://codepen.io/gavra/pen/tEpzn
      */
      var typeWriter = (function(){
        'use strict';

        // set up text to print, each item in array is new line
        var aText = new Array(
          "This a sample data of demo,", 
            "The demo include javascript code of <a href='https://codepen.io/gavra'>gavra</a>",
          "I include this in my tag ( i love this )",
            "Thanks for see this demo and sorry for my English."
        ),
            iSpeed = 100, // time delay of print out
            iIndex = 0, // start printing array at this posision
            iArrLength = aText[0].length, // the length of the text array
            iScrollAt = 20, // start scrolling up at this many lines
            iTextPos = 0, // initialise text position
            sContents = '', // initialise contents variable
            iRow; // initialise current row

        return{  
          run: function(){
            sContents =  ' ';
            iRow = Math.max(0, iIndex-iScrollAt);
            var destination = document.getElementById("typeWriter");

            while ( iRow < iIndex ) {
              sContents += aText[iRow++] + '<br />';
            }
            destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
            if ( iTextPos++ == iArrLength ) {
              iTextPos = 0;
              iIndex++;
              if ( iIndex != aText.length ) {
                iArrLength = aText[iIndex].length;
                setTimeout("typeWriter.run()", 500);
              }
            } else {
              setTimeout("typeWriter.run()", iSpeed);
            }  
          }
        };
      })();
      // run typewriter 
      typeWriter.run();
    </script>
  </textarea>
  <a href="#" id="c" class="btn">Convert</a>
  <pre id="p_uri" class="pre"></pre>
  <span class="preview"></span>
</div>