How to add new line?

[rdworianyn]

Hi,

As far as I know, new line in markdown is added by

• adding two space at the end of the line
• adding two new line characters
• adding \ at the end of the line
• adding <br> at the end of the line

I tried all of the above and none of them worked. Is there another way of adding new lines that vue-simple-markdown supports?

[mbackonja]

Hi,

You need to press enter key just like in any text editor. There is no special way to make a line break.

If You press enter key one time, You will get one new line (one line break) If You press enter key two times, You will get two new lines (two line breaks) etc

If You still have a problem, please paste here an example of the text which doesn't work.

[farhadhf]

Same problem here - The text that is being passed to :source has \r\n for line breaks. The \r\n should probably be replaced with <br> by vue-simple-markdown, but it's being included in the output HTML as is, and the browser simply ignores it while rendering the HTML. Sample code:

<tempalte>
<div id="markdown-test">
    <vue-simple-markdown :source="text"></vue-simple-markdown>
</div>
</template>

<script>
export default {
    name: 'MarkdownTest',
    data() {
        return {
            text: 'A\nB\r\nC'
        }
    }
}
</script>

<style>
</style>

HTML Output:

<div id="markdown-test">
<div class="vue-simple-markdown markdown-body" data-v-a42b9506="">
A
B
C
</div>
</div>

The output should be something like this:

<div id="markdown-test">
<div class="vue-simple-markdown markdown-body" data-v-a42b9506="">
A<br />B<br />C
</div>
</div>

[garbit]

I've also had this issue and found that I needed to include the css file within my component, as per the doc's guidance - https://github.com/Vivify-Ideas/vue-simple-markdown/blob/master/README.md#bundler-webpack-rollup

import 'vue-simple-markdown/dist/vue-simple-markdown.css';

My markdown renderer component:

<template lang="pug">
.container
  vue-simple-markdown(
    :source="content"
  )
</template>

<script>
import { VueMarkdown } from 'vue-markdown';
import axios from 'axios';
**import 'vue-simple-markdown/dist/vue-simple-markdown.css';**

export default {
  name: 'ContentResolver',
  components: {
    VueSimpleMarkdown,
    VueMarkdown,
  },
  mixins: [],
  props: {
    url: {
      type: String,
      default: null,
      required: true,
    },
  },
  data: () => ({
    content: '',
  }),
  watch: {
    url() {
      this.fetchContent(this.url);
    },
  },
  mounted() {
    this.fetchContent(this.url);
  },
  computed: {
    getContent() {
      return this.content;
    },
  },
  methods: {
    async fetchContent(url) {
      const res = await axios.get(url);
      this.content = res.data;
    },
  },
};
</script>

<style lang="sass" scoped>
</style>

[owenandrews]

This is the magic line: white-space: pre-wrap;

[portikM]

@owenandrews Could you give some more detail? Where should I include that line and how does it work?

[owenandrews]

@portikM Give your markdown element a class, say .markdown-body and then in your CSS file add:

.markdown-body {
    white-space: pre-wrap;
}