Problem with linebreaks


#1

Hello, this is my first post here, I have been working on a small documentation project and I want to use markdown for this. I’ve tried alot of other markdown pharsers on the web but most of them don’t have a support channel like this, so I’m posting for help here.

I’m using markdown directly inside a webpage like this

 <div class="col-md-8 docs" id="docs">
                  <div id="intro">
                      # HELLO
                      - - -
                      - [x] This task is done
                      - [ ] This is still pending
                  </div>
              </div>

The markdown is then simply compiled by this javascript file


function runMarkdownCompiler(){
    var text = document.getElementById("docs").innerText;
    var reader = new commonmark.Parser();
    var writer = new commonmark.HtmlRenderer();
    var parsed = reader.parse(text);

    var result = writer.render(parsed);

    document.getElementById("docs").innerHTML = result;
}
runMarkdownCompiler();

For some reason though, this is not working for any markdown pharser I use, the only way to go around this problem is by adding a <br/> tag at the end of each line, which is quite repeatative.

This is the result I get

So guys, where did I go wrong?


#2

I don’t think it’s being parsed at all. HTML ignores line breaks and whitespace (more than one character), so that’s likely why the text is appearing on one line.

Have you considered using an existing static site generator such as Jekyll (which supports Markdown) rather than this manual approach?


#3

To actually answer your question, you are starting an inline HTML block. In an inline HTML block, Markdown is not parsed (this allows you to copy-and-paste things like the “youtube embedding snippet”.

To put parsed Markdown within an HTML tag, separate the Markdown code from the HTML code with blank lines, like this:

 <div class="col-md-8 docs" id="docs">
                  <div id="intro">

                      # HELLO
                      - - -
                      - [x] This task is done
                      - [ ] This is still pending

                  </div>
              </div>