Hyperlinks enclosed in angle brackets break output. How to prevent this?

<div id="input">

**bold** and <em>italic</em>

- <https://example.com>
- <https://example.net>

</div>

<script src="https://unpkg.com/commonmark@0.29.3/dist/commonmark.js"></script>
<script>
window.onload = function() {
  var markdown = document.querySelector('#input').innerHTML;
  var reader = new commonmark.Parser();
  var writer = new commonmark.HtmlRenderer();
  var parsed = reader.parse(markdown);
  var result = writer.render(parsed);
  document.querySelector('body').innerHTML = result;
}
</script>

Output:

Why is that? How to prevent bare hyperlinks enclosed in angle brackets to be treated as tags, and at the same time to keep ability to parse HTML (that is <em>italic</em> should be rendered as italic)?

I tried the demo and it doesn’t have this problem.

You seem to be having an issue with a particular implementation. Which one that is, you don’t reveal. Checking the source in Babelmark gives quite different results but none look like yours.

It’s commonmark.js, the reference Commonmark implementation written in JS.

The flaw is in your code, which you would find with some very basic debugging. Hint 1: Examine the actual value you are passing to CommonMark.js. Hint 2: Every bit of your code above is parsed first by the browser as HTML, not Markdown.

1 Like

Oh, I didn’t bother to check what you’re actually doing in that <script> because I thought you were passing the whole snippet to CM. If this is within an HTML document, @vas is of course correct: It’s all treated as HTML – especially the angular brackets – before you’re trying to parse it as MD.

1 Like