Buggy Markdown rendering of a "circle" [duplicate]

Question

In this meta.codegolf sandbox question, the following shape is misaligned:

      ##########
   ###@%$*.&.%%!###
  ##!$,%&?,?*?.*@~##
 ##&**!,$%$@@?@*@&&##
#@&$?@!%$*%,.?@?.@&@,#
#,..,.$&*?!$$@%%,**&&#
 ##.!?@*.%?!*&$!%&?##
  ##!&?$?&.!,?!&!%##
   ###,@$*&@*,%*###
      ##########

It looks fine in the preview, but when it was posted, it got completely messed up. Why? (I cannot reproduce the bug here; look at the history to see it)

Using <pre> and <code> tags fixes the problem, but this still seems like a bug.

      ##########
   ###@%$*.&.%%!###
  ##!$,%&?,?*?.*@~##
 ##&**!,$%$@@?@*@&&##
#@&$?@!%$*%,.?@?.@&@,#
#,..,.$&*?!$$@%%,**&&#
 ##.!?@*.%?!*&$!%&?##
  ##!&?$?&.!,?!&!%##
   ###,@$*&@*,%*###
      ##########

I attempted to reproduce the problem with this snippet, but I failed:

var converter = new Markdown.getSanitizingConverter();
$("button").click(function() {
  $("#output").html(converter.makeHtml($("textarea").val()));
  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Sanitizer.js"></script>
<script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>
<script type="text/x-mathjax-config;executed=true">
    MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"], linebreaks: { automatic:true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) }, tex2jax: { inlineMath: [ ["\\(","\\)"], ["$", "$"] ], displayMath: [ ["$$","$$"], ["\\[", "\\]"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno" }, TeX: {  noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}" } }, messageStyle: "none" });</script>

<textarea style="width: 100%;"></textarea>
<button>Render</button>
<p id="output">
  Default empty text
</p>