title: ASCII art on website
body: <p>I'm trying to get some ASCII art on my website with a JavaScript function but the result isn't what I'm looking for right now...</p>
  
  <p>This is how it should look: </p>
  
  <p><a href="https://i.stack.imgur.com/MCwPb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MCwPb.png" alt="http://i.imgur.com/qHXxLtU.png"></a></p>
  
  <p>And here is the code I'm using to try to achieve that: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function log( text ) {
    $log = $('#log');
    //Add text to log
    $log.append(($log.val()?"":'')+ text );
    //Autoscroll
    $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
  }
        
        
  log('&lt;div style="font-family: monospace; white-space: pre;"&gt;' + 
      "  _______                              &lt;br&gt;" +
      " |__   __|                             &lt;br&gt;" +
      "    | | ___  _ __ ___  _ __ ___  _   _ &lt;br&gt;" +
      "    | |/ _ \| '_ ` _ \| '_ ` _ \| | | |&lt;br&gt;" +
      "    | | (_) | | | | | | | | | | | |_| |&lt;br&gt;" +
      "    |_|\___/|_| |_| |_|_| |_| |_|\__, |&lt;br&gt;" +
      "                                  __/ |&lt;br&gt;" +
      "                                 |___/ &lt;br&gt;"  +
      
      "&lt;br&gt;" +
       "&lt;/div&gt;");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="log"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Hope you guys come up with a better result than I did because this is not working at all for me right now.</p>