Breaks not rendering when using $md.render()

[Mei152]

Hello. Hoping for some direction here about what I might be doing wrong. I am using the markdownit module to render content produced from the Netlify CMS editor. The markdown-it configuration breaks: true doesn't seem to be honored in the HTML output. I deleted linkify: true just to see if any of the config settings were working, and, indeed, http://bla.com stopped displaying as an anchor, so that at least that is working as expected.

Any idea why \n\n is not showing up as a <br>? markdown-it docs say:

breaks - false. Set true to convert \n in paragraphs into <br>

Thanks for your help!

nuxt.config.js

 modules: [
    '@nuxtjs/markdownit'
  ],

  // [optional] markdownit options
  // See https://github.com/markdown-it/markdown-it
  markdownit: {
    injected: true,
    preset: 'default',
    linkify: true,
    breaks: true,
    use: [
      'markdown-it-container',
      'markdown-it-attrs'
    ]
  },

stuff.json

{
  "title": "Stuff",
  "date": "2018-03-01T23:59:10.464Z",
  "body": "Some stuff is here\n\n**And a whole bunch more here!**\n\n1. stuff\n2. stuff\n3. and more stuff\nhttp://bla.com"
}

stuff.vue

<template>
  <article>
    <h1>{{ title }}</h1>
    <div v-html="$md.render(body)"></div>
  </article>
</template>

<script>
  export default {
    async asyncData({ params }) {
      let stuff = await import('~/content/stuff.json');
      return stuff;
    }
  };
</script>

HTML output

<div id="__nuxt"><div class="nuxt-progress" style="width:0%;height:2px;background-color:#3B8070;opacity:0;"></div>
  <div id="__layout">
    <div>
      <article>
        <h1>Stuff</h1>
        <div>
          <p>Some stuff is here</p>
          <p><strong>And a whole bunch more here!</strong></p>
          <ol>
            <li>stuff</li>
            <li>stuff</li>
            <li>and more stuff<br>
            <a href="http://bla.com">http://bla.com</a></li>
          </ol>
        </div>
      </article>
    </div>
  </div>
</div>

_{This question is available on Nuxt.js community (#c115)}

[ig1na]

Did you find a solution yet ?

[huaiyukhaw]

Did you have a solution? I fell into the exact same problem.

[huaiyukhaw]

Adding CSS white-space: pre-line; to the div solves my problem.

[dogrocker]

I solved this by

add

<div id="editor" v-html="$md.render(content)"></div>

and add global style with

<style>
#editor p {
  padding: 10px;
}
</style>

[cpt-n3mo]

Also having this problem, even though the padding thing helps, its a nasty work around as it does not allow for multiple line breaks. anyone know how to properly fix this as the break setting does not seem to do anything.

kind regards

[sven-ra]

Any updates on this? <div id="editor" v-html="$md.render(content)"></div> I am also getting my content from a cms so white-space: pre-line; won't cut it, since it will create a lot of unnecessary line breaks.